CSSStyleSheet

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSSStyleSheet interface представляет одну CSS таблицу стилей. CSS таблица наследует свойства и методы от родителя, StyleSheet.

Таблица стилей состоит (правил) rules, таких как style rules ("h1,h2 { font-size: 16pt }"), и различных (@import, @media, ...), etc. CSSStyleSheet interface позволяет получать и изменять список правил в таблице стилей.

Смотрите Notes секцию о различных способах получения CSSStyleSheet object.

Properties

Inherits properties from its parent, StyleSheet.

CSSStyleSheet.cssRules

Returns a live CSSRuleList, listing the CSSRule objects in the style sheet. This is normally used to access individual rules like this: 

   styleSheet.cssRules[i] // where i = 0..cssRules.length-1

To add or remove items in cssRules, use the CSSStyleSheet's deleteRule() and insertRule() methods, described below.

CSSStyleSheet.ownerRule

If this style sheet is imported into the document using an @import rule, the ownerRule property will return that CSSImportRule, otherwise it returns null.

Methods

Inherits methods from its parent, Stylesheet.

CSSStyleSheet.deleteRule()

Deletes a rule at the specified position from the style sheet.

CSSStyleSheet.insertRule()

Inserts a new rule at the specified position in the style sheet, given the textual representation of the rule.

Notes

In some browsers, if a stylesheet is loaded from a different domain, calling cssRules results in SecurityError.

A stylesheet is associated with at most one Document, which it applies to (unless disabled). A list of CSSStyleSheet objects for a given document can be obtained using the document.styleSheets property. A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.

A CSSStyleSheet object is created and inserted into the document's styleSheets list automatically by the browser, when a style sheet is loaded for a document. As the document.styleSheets list cannot be modified directly, there's no useful way to create a new CSSStyleSheet object manually (although Constructable Stylesheet Objects is coming to the web platform soon and is already supported in Blink). To create a new stylesheet, insert a <style> or <link> element into the document.

A (possibly incomplete) list of ways a style sheet can be associated with a document follows:

Reason for the style sheet to be associated with the document Appears in document. styleSheets list Getting the owner element/rule given the style sheet object The interface for the owner object Getting the CSSStyleSheet object from the owner
<style> and <link> elements in the document Yes .ownerNode HTMLLinkElement, HTMLStyleElement, or SVGStyleElement .sheet
CSS @import rule in other style sheets applied to the document Yes .ownerRule CSSImportRule .styleSheet
<?xml-stylesheet ?> processing instruction in the (non-HTML) document Yes .ownerNode ProcessingInstruction .sheet
HTTP Link Header Yes N/A N/A N/A
User agent (default) style sheets No N/A N/A N/A

Спецификации

Specification
CSS Object Model (CSSOM)
# the-cssstylesheet-interface

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также