CSSStyleSheet
CSSStyleSheet interface представляет одну CSS таблицу стилей. CSS таблица наследует свойства и методы от родителя, StyleSheet.
Таблица стилей состоит (правил) rules, таких как style rules (en-US) ("h1,h2 { font-size: 16pt }"), и различных (@import, @media, ...), etc. CSSStyleSheet interface позволяет получать и изменять список правил в таблице стилей.
Смотрите Notes секцию о различных способах получения CSSStyleSheet object.
Properties
Inherits properties from its parent, StyleSheet.
CSSStyleSheet.cssRules(en-US)-
Returns a live
CSSRuleList(en-US), listing theCSSRuleobjects 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 theCSSStyleSheet'sdeleteRule()andinsertRule()methods, described below. CSSStyleSheet.ownerRule(en-US)-
If this style sheet is imported into the document using an
@import(en-US) rule, theownerRuleproperty will return thatCSSImportRule(en-US), otherwise it returnsnull.
Methods
Inherits methods from its parent, Stylesheet.
CSSStyleSheet.deleteRule()(en-US)-
Deletes a rule at the specified position from the style sheet.
CSSStyleSheet.insertRule()(en-US)-
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 (en-US) 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 (en-US) 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 (en-US) |
HTMLLinkElement, HTMLStyleElement (en-US), or SVGStyleElement (en-US) |
.sheet (en-US) |
CSS @import (en-US) rule in other style sheets applied to the document |
Yes | .ownerRule (en-US) |
CSSImportRule (en-US) |
.styleSheet (en-US) |
<?xml-stylesheet ?> processing instruction in the (non-HTML) document |
Yes | .ownerNode (en-US) |
ProcessingInstruction (en-US) |
.sheet (en-US) |
| HTTP Link Header | Yes | N/A | N/A | N/A |
| User agent (default) style sheets | No | N/A | N/A | N/A |
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Object Model (CSSOM) Определение 'CSSStyleSheet' в этой спецификации. |
Рабочий черновик | |
| Document Object Model (DOM) Level 2 Style Specification Определение 'CSSStyleSheet' в этой спецификации. |
Устаревшая | Initial definition |
Browser compatibility
BCD tables only load in the browser