HTMLStyleElement

Jump to:

The HTMLStyleElement interface represents a <style> element. It inherits properties and methods from its parent, HTMLElement, and from LinkStyle.

This interface doesn't allow to manipulate the CSS it contains (in most case). To manipulate CSS, see Using dynamic styling information for an overview of the objects used to manipulate specified CSS properties using the DOM.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLStyleElement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="411" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLStyleElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

Inherits properties from its parent, HTMLElement, and implements LinkStyle.

HTMLStyleElement.media: Is a DOMString representing the intended destination medium for style information.
HTMLStyleElement.type: Is a DOMString representing the type of style being applied by this statement.
HTMLStyleElement.disabled: Is a Boolean value representing whether or not the stylesheet is disabled (true) or not (false).
LinkStyle.sheet Read only: Returns the StyleSheet object associated with the given element, or null if there is none
HTMLStyleElement.scoped: Is a Boolean value indicating if the element applies to the whole document (false) or only to the parent's sub-tree (true).

Methods

No specific method; inherits properties from its parent, HTMLElement, and LinkStyle.

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'HTMLStyleElement' in that specification.	Living Standard	No change from HTML5.
HTML 5.1 The definition of 'HTMLStyleElement' in that specification.	Recommendation
HTML5 The definition of 'HTMLStyleElement' in that specification.	Recommendation	The following property has been added: `scoped`.
Document Object Model (DOM) Level 2 HTML Specification The definition of 'HTMLStyleElement' in that specification.	Obsolete	Added a second inheritence, the `LinkStyle` interface.
Document Object Model (DOM) Level 1 Specification The definition of 'HTMLStyleElement' in that specification.	Obsolete	Initial definition

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	Yes	Yes	Yes	Yes	Yes	Yes
`media`	Yes	12	Yes	Yes	Yes	Yes
`type`	Yes	12	Yes	Yes	Yes	Yes
`disabled`	Yes	13	Yes	Yes	Yes	Yes
`sheet`	Yes	Yes	Yes	Yes	Yes	Yes
`scoped`	19 — 35¹	No	55² ³ 21 — 55	No	No	No

Feature	Android webview	Chrome for Android	Edge mobile	Firefox for Android	Opera Android	iOS Safari	Samsung Internet
Basic support	Yes	Yes	Yes	Yes	Yes	Yes	?
`media`	Yes	Yes	Yes	Yes	Yes	Yes	?
`type`	Yes	Yes	Yes	Yes	Yes	Yes	?
`disabled`	Yes	Yes	Yes	Yes	Yes	Yes	?
`sheet`	Yes	Yes	Yes	Yes	Yes	Yes	?
`scoped`	No	No	No	55² ³ 21 — 55	No	No	?

1. From version 19 until version 35 (exclusive): this feature is behind the Enable <style scoped> preference (needs to be set to true). To change preferences in Chrome, visit chrome://flags.

2. This property was hidden behind a pref because no other browsers support it (See bug 1291515).

3. From version 55: this feature is behind the layout.css.scoped-style.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	?
`media`	Full support Yes	Full support 12	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	?
`type`	Full support Yes	Full support 12	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	?
`disabled`	Full support Yes	Full support 13	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	?
`sheet`	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	Full support Yes	?
`scoped` DeprecatedNon-standard	No support 19 — 35 Disabled No support 19 — 35 Disabled Disabled From version 19 until version 35 (exclusive): this feature is behind the `Enable <style scoped>` preference (needs to be set to `true`). To change preferences in Chrome, visit chrome://flags.	No support No	Full support 55 Notes Disabled Full support 55 Notes Disabled Notes This property was hidden behind a pref because no other browsers support it (See bug 1291515). Disabled From version 55: this feature is behind the `layout.css.scoped-style.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. No support 21 — 55	No support No	No support No	No support No	No support No	No support No	No support No	Full support 55 Notes Disabled Full support 55 Notes Disabled Notes This property was hidden behind a pref because no other browsers support it (See bug 1291515). Disabled From version 55: this feature is behind the `layout.css.scoped-style.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config. No support 21 — 55	No support No	No support No	?

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Non-standard. Expect poor cross-browser support.: Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.: Deprecated. Not for use in new websites.
See implementation notes.: See implementation notes.
User must explicitly enable this feature.: User must explicitly enable this feature.

Document Tags and Contributors

Tags:

Contributors to this page: ExE_Boss, Sebastianz, Sheppy, arronei, libbymc, slimsag, teoli, Nexii, kscarfone, ethertank, dextra, Ms2ger, Brettz9, Jay I., Mgjbot, Jabez, Takenbot, Chad.burrus, PointedEars, RobG, DBaron, Nickolay, Dinosaurdarrell, Dria, Hao2lian, JesseW, Callek

Last updated by: ExE_Boss, Mar 15, 2018, 3:18:53 PM

Feb	MAR	Apr
	31
2017	2018	2019