HTML DOM styl eiendom
Voorbeeld
Voeg 'n rooi kleur by 'n <h1>-element:
document.getElementById("myH1").style.color = "red";
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die styl-eienskap gee 'n CSSStyleDeclaration-objek terug, wat 'n element se stylkenmerk verteenwoordig.
Die styl-eienskap word gebruik om 'n spesifieke styl van 'n element te kry of te stel deur verskillende CSS-eienskappe te gebruik.
Let wel: Dit is nie moontlik om style te stel deur 'n string aan die styl-eienskap toe te ken nie, bv. element .style = "color: red;". Om die styl van 'n element te stel, voeg 'n "CSS"-eienskap by styl en spesifiseer 'n waarde, soos volg:
element.style.backgroundColor = "red"; // set the background color of an element to red
Soos u kan sien, is die JavaScript-sintaksis vir die opstel van CSS-eienskappe effens anders as CSS (agtergrondkleur in plaas van agtergrondkleur).
Vir 'n lys van alle beskikbare eiendomme, sien ons stylobjekverwysing .
Let wel: Die styl-eienskap gee slegs die CSS-verklarings terug wat in die element se inlynstyl-kenmerk gestel is, bv.
<p style="color: red;">. Dit is nie moontlik om hierdie eienskap te gebruik om inligting oor stylreëls van die <head>-afdeling in die dokument of eksterne stylblaaie te kry nie.
Jy kan egter toegang tot die <style>-element vanaf <head> verkry deur document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Let wel: Dit word aanbeveel om die styl-eienskap in plaas van die element .setAttribute("style", "...") -metode te gebruik, want die styl-eienskap sal nie ander CSS-eienskappe wat in die stylkenmerk gespesifiseer kan word, oorskryf nie.
Blaaierondersteuning
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sintaksis
Gee styl eienskappe:
element.style.property
Stel styl eienskappe:
element.style.property = value
Eiendomswaardes
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Tegniese besonderhede
| Terugkeerwaarde: | 'n CSSStyleDeclaration-objek, wat 'n element se stylkenmerk verteenwoordig |
|---|---|
| DOM weergawe | Dom Vlak 2 CSS |
Meer voorbeelde
Voorbeeld
Kry die waarde van 'n <p> element se boonste rand:
var x = document.getElementById("myP").style.borderTop;
Verwante bladsye
CSS-tutoriaal: CSS-tutoriaal
CSS-verwysing: CSS-eienskappe
HTML DOM-verwysing: stylobjekverwysing
HTML-verwysing: HTML <style> tag
❮ Elementvoorwerp