Html | Propriedade do elemento DOM

Muitas vezes, precisamos modificar as coisas no site para ver como fica. Nesse caso, tornar os elementos editáveis ​​podem ser necessários. Para fazer isso, o html dom “contentável”O elemento pode ser utilizado. Este elemento é usado como um atributo no elemento HTML. Além disso, o elemento associado a este atributo pode ser editado ou modificado na página da web.

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

.contente
Largura: 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”

H2
Background-Color: #f06f6f;
preenchimento: 5px;

O "cor de fundo" e "preenchimento”As propriedades funcionam como descrito acima.

Estilo "p" Elemento

.conteúdo p
Size 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.