我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译
您也可以阅读此文章的English (US)版。
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| 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 — 351 | No | 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 | Yes |
media | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
type | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
disabled | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
sheet | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
scoped | No | No | No | 21 — 55 | No | 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.
See also
- The HTML element implementing this interface:
<style>. - Using dynamic styling information to see how to manipulate CSS.