Html | Propriedade do elemento DOM
Esta redação fornecerá um guia sobre o elemento HTML DOM ContentEditable Property.
Como fazer um elemento editável em html?
O html “contentável”A propriedade é utilizada para identificar se o conteúdo do elemento é ou não editável. Esta propriedade retorna um valor booleano onde o “verdadeiro”O valor significa que o elemento é editável e o“falso”Indica que o conteúdo não é editável. Esta propriedade pode ser utilizada com qualquer elemento.
Exemplo: como adicionar atributo "contenteditable" em elementos html?
Em HTML, em primeiro lugar, especifique um elemento de cabeçalho
para incluir um caminho para o documento. Em seguida, adicione um html
Elemento associado aos atributos:
- eu ia: Este atributo é utilizado para identificar exclusivamente o elemento, acessado em CSS e JavaScript.
- contentável: Um atributo que significa se o elemento html é editável ou não. É um atributo booleano.
Por fim, adicione mais um
elemento com o id “resultado”, Que será exibido após a manipulação de JavaScript:
Propriedade HTML Contentável
Posso editar este parágrafo?
Vamos aplicar JavaScript para exibir o valor do atributo contentável com a ajuda do “contentável" propriedade.
JavaScript
Aqui está a explicação do código acima mencionado:
- Dentro do elemento HTML, crie uma variável “responder”Usando a palavra -chave“var”.
- Então, busque o elemento com o id “pára”E torná -lo editável com o“contentável" propriedade.
- Para incorporar o valor booleano da propriedade contentável na
Elemento com o ID "Result", especifique o "documento.getElementById ()”Função com o ID do
tag como seu parâmetro.
- O "Innerhtml”A propriedade retorna ou especifica o conteúdo HTML de um elemento em que o resultado precisa ser incorporado.
- O valor do “responder”A variável é atribuída ao elemento com o ID“resultado”.
Pode -se observar que o elemento parágrafo agora é editável:
Vamos aplicar algumas propriedades CSS ao HTML, como mencionado acima.
Estilo “conteúdo” div
.contenteLargura: 500px;
Altura: 170px;
Background-Color: #f89e9e;
margem: 0 automático;
preenchimento: 12px;
O elemento div com o nome da classe “contente”É aplicado com as seguintes propriedades CSS:
- ““largura”Propriedade determina a largura do elemento.
- ““altura”Ajusta a altura do elemento.
- ““cor de fundo”Aplica uma cor ao fundo do elemento.
- ““margem”Com o valor definido como“0 Auto”Não identifica espaço no fundo superior e equivalente nos lados esquerdo e direito do elemento.
- ““preenchimento”A propriedade adiciona espaço em todos os lados do conteúdo do elemento ou dentro da borda.
Elemento de estilo “H2”
H2Background-Color: #f06f6f;
preenchimento: 5px;
O "cor de fundo" e "preenchimento”As propriedades funcionam como descrito acima.
Estilo "p" Elemento
.conteúdo pSize da fonte: 24px;
Background-Color: #EB7C7C;
preenchimento: 2px;
Cursor: Ponteiro;
Abaixo estão as propriedades aplicadas ao “p”Elemento do“contenteDiv:
- ““tamanho da fonte”Propriedade define o tamanho da fonte do elemento.
- ““cursor”Propriedade com o valor“ponteiro”Define o cursor como uma mão com um dedo apontador.
Aqui está a análise final da página criada acima:
Exemplo: o atributo "contentedável" com o valor "falso"
Abaixo o código determinado representa que o valor do “contentável”O atributo é definido como“falso”:
Posso editar este parágrafo?
A partir da saída fornecida, pode -se verificar se o elemento não é editável:
É assim que a propriedade contentável funciona.
Conclusão
Em HTML, o “contentável”O atributo é utilizado para tornar os elementos editáveis. É um atributo booleano com um valor verdadeiro ou falso. O "contentável”A propriedade em JavaScript pode ser utilizada para acessar o valor deste atributo. Este blog guiou sobre o elemento HTML DOM Contentável propriedade com exemplos.