Html | Elemento DOM Proprietà contentypedibile

Spesso, dobbiamo modificare le cose sul sito Web per vedere come appare. In tal caso, potrebbe essere necessario modificare gli elementi. Per fare ciò, l'HTML Dom "ContentEdible"L'elemento può essere utilizzato. Questo elemento è usato come attributo nell'elemento HTML. Inoltre, l'elemento associato a questo attributo può essere modificato o modificato nella pagina web.

Questo articolo fornirà una guida sulla proprietà con contenimento dell'elemento DOM HTML.

Come rendere un elemento modificabile in html?

L'HTML “ContentEdible"La proprietà viene utilizzata per identificare se il contenuto dell'elemento è modificabile. Questa proprietà restituisce un valore booleano in cui il "VERO"Il valore significa che l'elemento è modificabile e il"falso"Indica che il contenuto non è modificabile. Questa proprietà può essere utilizzata con qualsiasi elemento.

Esempio: come aggiungere l'attributo "ContentEdible" negli elementi HTML?
In HTML, in primo luogo, specificare un elemento di intestazione

per includere un'intestazione al documento. Quindi, aggiungi un HTML

Elemento associato agli attributi:

• id: Questo attributo viene utilizzato per identificare in modo univoco l'elemento, accessibile in CSS e JavaScript.
• ContentEdible: Un attributo che significa se l'elemento HTML è modificabile o no. È un attributo booleano.

Finalmente, aggiungi un altro

elemento con l'ID "risultato", Che verrà visualizzato dopo la manipolazione di JavaScript:

Proprietà con content di HTML

Posso modificare questo paragrafo?

Applichiamo JavaScript per visualizzare il valore dell'attributo contento con l'aiuto di "ContentEdible" proprietà.

JavaScript

Ecco la spiegazione del codice sopra indicato:

• All'interno dell'elemento HTML, crea una variabile "risposta"Utilizzo della parola chiave"var".
• Quindi, prendi l'elemento con l'ID "parà"E renderlo modificabile con il"ContentEdible" proprietà.
• Incorporare il valore booleano della proprietà contentissimi di contenuti in

  Elemento con il "risultato" ID, specifica il "documento.getElementById ()"Funzione con l'ID del

  Tag come parametro.

• IL "Innerhtml"La proprietà restituisce o specifica il contenuto HTML di un elemento in cui il risultato deve essere incorporato.
• Il valore del "risposta"La variabile è assegnata all'elemento con l'ID"risultato".

Si può vedere che l'elemento di paragrafo è ora modificabile:

Applichiamo alcune proprietà CSS all'HTML, come menzionato sopra.

Stile "contenuto" di stile

.contenuto
larghezza: 500px;
Altezza: 170px;
Background-color: #f89e9e;
Margine: 0 Auto;
imbottitura: 12px;

L'elemento div con il nome di classe "contenuto"Viene applicato con le seguenti proprietà CSS:

• "larghezza"La proprietà determina la larghezza dell'elemento.
• "altezza"Regola l'altezza dell'elemento.
• "colore di sfondo"Applica un colore sullo sfondo dell'elemento.
• "margine"Con il valore impostato come"0 Auto"Non identifica spazio sul fondo superiore e spazio equivalente sui lati sinistro e destro dell'elemento.
• "imbottitura"La proprietà aggiunge spazio a tutti i lati del contenuto dell'elemento o all'interno del bordo.

Elemento "H2" di stile

H2
Background-color: #f06f6f;
imbottitura: 5px;

IL "colore di sfondo" E "imbottitura"Le proprietà funzionano come descritto sopra.

Stile "P"Elemento

.contenuto p
Font-size: 24px;
Background-color: #EB7C7C;
imbottitura: 2px;
Cursore: puntatore;

Di seguito sono riportate le proprietà applicate al "P"Elemento del"contenuto"Div:

• "dimensione del font"La proprietà imposta la dimensione del carattere dell'elemento.
• "cursore"Proprietà con il valore"Pointer"Imposta il cursore come una mano con un dito indicatore.

Ecco lo sguardo finale alla pagina sopra creata:

Esempio: l'attributo "ContentEdible" con valore "falso"
Di seguito il codice indicato rappresenta che il valore di "ContentEdible"L'attributo è impostato come"falso":

Posso modificare questo paragrafo?

Dall'output indicato, si può verificare che l'elemento non è modificabile:

Questo è il modo in cui funziona la proprietà contenti.

Conclusione

In HTML, il "ContentEdible"L'attributo viene utilizzato per rendere modificabili gli elementi. È un attributo booleano con un valore vero o falso. IL "ContentEdible"La proprietà in JavaScript può essere utilizzata per accedere al valore di questo attributo. Questo blog ha guidato la proprietà contentyEdibile elemento DOM HTML con esempi.