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
DOMStringrepresenting the intended destination medium for style information. HTMLStyleElement.type- Is a
DOMStringrepresenting the type of style being applied by this statement. HTMLStyleElement.disabled- Is a
Booleanvalue representing whether or not the stylesheet is disabled (true) or not (false). LinkStyle.sheetRead only- Returns the
StyleSheetobject associated with the given element, ornullif there is none HTMLStyleElement.scoped- Is a
Booleanvalue 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 |
Browser compatibility
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 1.0 (1.7 or earlier) | (Yes) | (Yes) | (Yes) |
scoped |
No support | No support | 21.0 (21.0) | No support | No support | No support |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | 1.0 (1.0) | (Yes) | (Yes) | (Yes) |
scoped |
? | No support | 21.0 (21.0) | No support | No support | No support |
See also
- The HTML element implementing this interface:
<style>. - Using dynamic styling information to see how to manipulate CSS.
Document Tags and Contributors
Tags:
Contributors to this page:
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:
Sebastianz,