Html | Propiedad Conteditable de elemento DOM

A menudo, necesitamos modificar las cosas en el sitio web para ver cómo se ve. En tal caso, se puede requerir hacer elementos editables. Para hacerlo, el HTML DOM "contento"El elemento se puede utilizar. Este elemento se usa como un atributo en el elemento HTML. Además, el elemento asociado con este atributo se puede editar o modificar en la página web.

Esta redacción proporcionará una guía sobre la propiedad Contentedable del elemento HTML DOM.

Cómo hacer un elemento editable en HTML?

El html "contentoLa propiedad se utiliza para identificar si el contenido del elemento es editable o no. Esta propiedad devuelve un valor booleano donde el "verdadero"El valor significa que el elemento es editable, y el"FALSO"Indica que el contenido no es editable. Esta propiedad se puede utilizar con cualquier elemento.

Ejemplo: cómo agregar el atributo "contento" en elementos HTML?
En HTML, en primer lugar, especifique un elemento de encabezado

incluir un encabezado al documento. Entonces, agregue un HTML

Elemento asociado con los atributos:

• identificación: Este atributo se utiliza para identificar de manera exclusiva el elemento, accedido en CSS y JavaScript.
• contento: Un atributo que significa si el elemento HTML es editable o no. Es un atributo booleano.

Por fin, agrega uno más

elemento con la identificación "resultado", Que se mostrará después de la manipulación de JavaScript:

HTML Propiedad Contentedable

¿Puedo editar este párrafo??

Aplicemos JavaScript para mostrar el valor del atributo contento con la ayuda del "contento" propiedad.

Javascript

Aquí está la explicación del código mencionado anteriormente:

• Dentro del elemento HTML, cree una variable "respuesta"Usando la palabra clave"varilla".
• Luego, obtenga el elemento que tiene la identificación "paraca"Y hazlo editable con el"contento" propiedad.
• Para incrustar el valor booleano de la propiedad contenta en el

  elemento con el "resultado" de ID, especifique el "documento.getElementById ()"Funciona con la identificación del

  etiqueta como su parámetro.

• El "innerhtml"La propiedad devuelve o especifica el contenido HTML de un elemento donde el resultado debe ser integrado.
• El valor del "respuesta"Se asigna variable al elemento que tiene la identificación"resultado".

Se puede ver que el elemento de párrafo ahora es editable:

Aplicemos algunas propiedades CSS al HTML, como se mencionó anteriormente.

Estilo "Contenido" Div

.contenido
Ancho: 500px;
Altura: 170px;
Color de fondo: #F89E9E;
margen: 0 auto;
relleno: 12px;

El elemento divir con el nombre de la clase "contenido"Se aplica con las siguientes propiedades CSS:

• "ancho"La propiedad determina el ancho del elemento.
• "altura"Ajusta la altura del elemento.
• "color de fondo"Aplica un color al fondo del elemento.
• "margen"Con el valor establecido como"0 Auto"No identifica espacio en el espacio superior y equivalente en los lados izquierdo y derecho del elemento.
• "relleno"La propiedad agrega espacio a todos los lados del contenido del elemento o dentro del borde.

Elemento de estilo "H2"

H2
Color de fondo: #f06f6f;
relleno: 5px;

El "color de fondo" y "relleno"Las propiedades funcionan como se describe anteriormente.

Estilo "pag" Elemento

.contenido p
tamaño de fuente: 24px;
Color de fondo: #EB7C7C;
relleno: 2px;
cursor: puntero;

A continuación se muestran las propiedades aplicadas al "pag"Elemento del"contenido"Div:

• "tamaño de fuente"La propiedad establece el tamaño de fuente del elemento.
• "cursor"Propiedad con el valor"puntero"Establece el cursor como una mano con un dedo puntiagudo.

Aquí está el aspecto final de la página creada anteriormente:

Ejemplo: el atributo "contento" con valor "falso"
A continuación, el código dado representa que el valor del "contento"El atributo se establece como"FALSO":

¿Puedo editar este párrafo??

Desde la salida dada, se puede verificar que el elemento no es editable:

Así es como funciona la propiedad contentable.

Conclusión

En HTML, el "contentoEl atributo se utiliza para hacer que los elementos editen. Es un atributo booleano que tiene un valor verdadero o falso. El "contento"La propiedad en JavaScript se puede utilizar para acceder al valor de este atributo. Este blog guió sobre la propiedad Contentedable de HTML DOM Element con ejemplos.