Proprietà in stile DOM HTML
Esempio
Aggiungi un colore rosso a un elemento <h1>:
document.getElementById("myH1").style.color = "red";
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La proprietà style restituisce un oggetto CSSStyleDeclaration, che rappresenta l'attributo di stile di un elemento.
La proprietà style viene utilizzata per ottenere o impostare uno stile specifico di un elemento utilizzando diverse proprietà CSS.
Nota: non è possibile impostare stili assegnando una stringa alla proprietà style, ad es. element .style = "color: red;". Per impostare lo stile di un elemento, aggiungi una proprietà "CSS" allo stile e specifica un valore, come questo:
element.style.backgroundColor = "red"; // set the background color of an element to red
Come puoi vedere, la sintassi JavaScript per l'impostazione delle proprietà CSS è leggermente diversa da CSS (backgroundColor invece di background-color).
Per un elenco di tutte le proprietà disponibili, vedere il nostro Riferimento per gli oggetti di stile .
Nota: la proprietà style restituisce solo le dichiarazioni CSS impostate nell'attributo di stile inline dell'elemento, ad esempio
<p style="color: red;">. Non è possibile utilizzare questa proprietà per ottenere informazioni sulle regole di stile dalla sezione <head> nel documento o nei fogli di stile esterni.
Tuttavia, puoi accedere all'elemento <style> da <head> utilizzando document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Nota: si consiglia di utilizzare la proprietà style invece del metodo element .setAttribute("style", "...") , poiché la proprietà style non sovrascriverà altre proprietà CSS che potrebbero essere specificate nell'attributo style.
Supporto browser
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sintassi
Proprietà dello stile di ritorno:
element.style.property
Imposta proprietà di stile:
element.style.property = value
Valori di proprietà
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Dettagli tecnici
| Valore di ritorno: | Un oggetto CSSStyleDeclaration, che rappresenta l'attributo di stile di un elemento |
|---|---|
| Versione DOM | Dom Livello 2 CSS |
Altri esempi
Esempio
Ottieni il valore del bordo superiore di un elemento <p>:
var x = document.getElementById("myP").style.borderTop;
Pagine correlate
Esercitazione CSS : Esercitazione CSS
Riferimento CSS: Proprietà CSS
Riferimento HTML DOM: Riferimento oggetto di stile
Riferimento HTML: tag HTML <stile>
❮ Oggetto Elemento