Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
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 – seine interne
CSSRuleList.
Syntax
insertRule(rule)
insertRule(rule, index)
Parameter
rule-
Ein String, der die einzufügende Regel enthält. Was die eingefügte Regel enthalten 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 ganze Zahl, 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. (Bei ä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: der Versuch, eine@importAt-Regel nach einer Stilregel einzufügen. SyntaxErrorDOMException-
Wird ausgelöst, wenn mehr als eine Regel im
rule-Parameter angegeben wird. InvalidStateErrorDOMException-
Wird ausgelöst, wenn
rule@namespaceist und die Regel-Liste mehr als nur@importAt-Regeln und/oder@namespaceAt-Regeln enthält.
Beispiele
Einfügen einer neuen Regel
Dieses Snippet fügt eine neue Regel an die Spitze meines Stylesheets ein.
myStyle.insertRule("#blanc { color: white }", 0);
Funktion zum Hinzufügen einer Stylesheetregel
/**
* 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 |
Browser-Kompatibilität
Loading...