We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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.

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes Yes Yes Yes Yes Yes
media Yes12 Yes Yes Yes Yes
type Yes12 Yes Yes Yes Yes
disabled Yes13 Yes Yes Yes Yes
sheet Yes Yes Yes Yes Yes Yes
scoped19 — 351 No

552 3

21 — 55

No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung 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

552 3

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

Document Tags and Contributors

Last updated by: ExE-Boss,