CSSStyleSheet: insertRule() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die CSSStyleSheet.insertRule() Methode fügt eine neue CSS-Regel in das aktuelle Stylesheet ein.
Hinweis:
Obwohl insertRule() ausschließlich eine Methode von
CSSStyleSheet ist, wird die Regel tatsächlich in
[CSSStyleSheet](/de/docs/Web/API/CSSStyleSheet).cssRules eingefügt — ihrer internen
CSSRuleList.
Syntax
insertRule(rule)
insertRule(rule, index)
Parameter
rule-
Ein String, der die einzufügende Regel enthält. Was die eingefügte Regel beinhalten muss, hängt von ihrem Typ ab:
- Für Regel-Sets, sowohl ein Selektor als auch eine Stil-Deklaration.
- Für At-Regeln, sowohl ein At-Identifikator als auch der Regelinhalt.
indexOptional-
Eine positive Ganzzahl, die kleiner oder gleich
stylesheet.cssRules.lengthist und die Position der neu eingefügten Regel in[CSSStyleSheet](/de/docs/Web/API/CSSStyleSheet).cssRulesdarstellt. Der Standardwert ist0. (In älteren Implementierungen war dies erforderlich. Siehe Browser-Kompatibilität für Details.)
Rückgabewert
Der Index der neu eingefügten Regel innerhalb der Regel-Liste des Stylesheets.
Ausnahmen
IndexSizeErrorDOMException-
Wird ausgelöst, wenn
index>[CSSRuleList](/de/docs/Web/API/CSSRuleList).length. HierarchyRequestErrorDOMException-
Wird ausgelöst, wenn
ruleaufgrund einer CSS-Einschränkung nicht an der angegebenen Position eingefügt werden kann; zum Beispiel: Versuch, eine@importAt-Regel nach einer Stil-Regel einzufügen. SyntaxErrorDOMException-
Wird ausgelöst, wenn im
rule-Parameter mehr als eine Regel angegeben ist. InvalidStateErrorDOMException-
Wird ausgelöst, wenn
ruleeine@namespaceist und die Regel-Liste mehr als nur@import-At-Regeln und/oder@namespace-At-Regeln enthält.
Beispiele
Einfügen einer neuen Regel
Dieses Snippet fügt eine neue Regel an den Anfang meines Stylesheets hinzu.
myStyle.insertRule("#blanc { color: white }", 0);
Funktion zum Hinzufügen einer Stylesheet-Regel
/**
* Add a stylesheet rule to the document (it may be better practice
* to dynamically change classes, so style information can be kept in
* genuine stylesheets and avoid adding extra elements to the DOM).
* Note that an array is needed for declarations and rules since ECMAScript does
* not guarantee a predictable object iteration order, and since CSS is
* order-dependent.
* @param {Array} rules Accepts an array of JSON-encoded declarations
* @example
addStylesheetRules([
['h2', // Also accepts a second argument as an array of arrays instead
['color', 'red'],
['background-color', 'green', true] // 'true' for !important rules
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules(rules) {
const styleEl = document.createElement("style");
// Append <style> element to <head>
document.head.appendChild(styleEl);
// Grab style element's sheet
const styleSheet = styleEl.sheet;
for (let rule of rules) {
let i = 1,
selector = rule[0],
propStr = "";
// If the second argument of a rule is an array of arrays, correct our variables.
if (Array.isArray(rule[1][0])) {
rule = rule[1];
i = 0;
}
for (; i < rule.length; i++) {
const prop = rule[i];
propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
}
// Insert CSS Rule
styleSheet.insertRule(
`${selector}{${propStr}}`,
styleSheet.cssRules.length,
);
}
}
Spezifikationen
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |