Esempio
Aggiungere un colore rosso a un <h1> Elemento:
document.getElementById("myH1").style.color = "red"; Prima di impostare lo stile:
Hello World!
Dopo aver impostato lo stile:
Hello World!
Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
La proprietà di stile restituisce un oggetto CSSStyleDeclaration, che rappresenta attributo di stile di un elemento.
La proprietà di stile viene utilizzato per ottenere o impostare uno stile specifico di un elemento utilizzando diverse proprietà CSS.
Nota: Non è possibile impostare gli stili assegnando una stringa alla proprietà di stile, ad esempio elemento .style = "color: red;" . Per impostare lo stile di un elemento, aggiungere un "CSS" di proprietà di stile e specificare un valore, come questo:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Come si può vedere, la sintassi JavaScript per impostare le proprietà CSS è leggermente diverso da CSS (backgroundColor instead of background-color) .
Per un elenco di tutte le proprietà disponibili, vedere il nostro stile di oggetto di riferimento .
Nota: la proprietà di stile restituisce solo le dichiarazioni CSS impostate in attributo style inline dell'elemento, ad esempio,
<P style = "color: red;">. Non è possibile utilizzare questa proprietà per ottenere informazioni su regole di stile da <head> sezione del documento o fogli di stile esterni.
Tuttavia, è possibile accedere al <style> elemento da <head> utilizzando documenti. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Nota: Si consiglia di utilizzare la proprietà di stile al posto del element . setAttribute("style", "...") il metodo, perché la proprietà di stile non sovrascriverà altre proprietà CSS che possono essere specificate nel style attributo.
Supporto browser
| Proprietà | |||||
|---|---|---|---|---|---|
| style | sì | sì | sì | sì | sì |
Sintassi
Rientro proprietà di stile:
element .style. property Impostare le proprietà di stile:
element .style. property = value I valori delle proprietà
| Valore | Descrizione |
|---|---|
| value | Specifica il valore della proprietà specificata. Ad esempio, per la proprietà borderBottom: Elemento .style.borderBottom = "red solido 2px"; |
Dettagli tecnici
| Valore di ritorno: | Un oggetto CSSStyleDeclaration, che rappresenta attributo di stile di un elemento |
|---|---|
| DOM Version | DOM Level 2 CSS |
Altri esempi
Esempio
Prendi il valore di un <p> top-border dell'elemento:
var x = document.getElementById("myP").style.borderTop;Il risultato di x sarà:
5px solid red Prova tu stesso " Pagine correlate
Tutorial CSS: CSS Tutorial
CSS Riferimento: Proprietà CSS
HTML DOM Riferimento: Stile Object Reference
HTML Riferimento: HTML <style> tag
<Oggetto Element