Signatur
Beschreibung
Die Eigenschaft selectorText der Schnittstelle CSSPageRule gibt den Seitenselektor einer @page-Regel als Zeichenkette zurück. Das ist der Teil zwischen @page und der öffnenden geschweiften Klammer, also etwa :first, :left, :right, :blank oder ein benannter Seitentyp wie landscape. Hat die Regel keinen Selektor (@page { … }), ist der Wert eine leere Zeichenkette.
Die Eigenschaft ist auch beschreibbar. Wenn Sie einen neuen Wert zuweisen, parst der Browser ihn als Seitenselektorliste. Ist der Wert gültig, wird der Selektor der Regel ersetzt. Ist er ungültig, passiert gar nichts: Es gibt keine Ausnahme, und der alte Wert bleibt erhalten.
In der Praxis brauchen Sie selectorText vor allem für Druck-Stylesheets. Damit können Sie bestehende @page-Regeln per Skript finden, prüfen oder umbauen, zum Beispiel um Ränder nur für die erste Seite anzupassen oder um einen Druckvorschau-Editor zu bauen. Die @page-Regeln erreichen Sie über document.styleSheets und CSSStyleSheet.cssRules. Dort erkennen Sie sie mit rule instanceof CSSPageRule.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | Nur beim Setzen: neue Seitenselektorliste, z. B. ":first", "landscape:left" oder "" für eine Regel ohne Selektor. Ungültige Werte werden ohne Meldung ignoriert. |
Rückgabewert
@page-Regel oder eine leere Zeichenkette, wenn die Regel keinen Selektor hat.Beispiele
Selektoren aller @page-Regeln auflisten
// Stylesheet mit Druckregeln anlegen
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@page { margin: 2cm; }
@page :first { margin-top: 5cm; }
@page :left { margin-left: 3cm; }
`);
const pageRules = [...sheet.cssRules].filter(
(rule) => rule instanceof CSSPageRule
);
pageRules.forEach((rule) => {
console.log(`Selektor: "${rule.selectorText}"`);
});Selektor einer bestehenden Regel ändern
const sheet = new CSSStyleSheet();
sheet.replaceSync('@page :first { margin-top: 4cm; }');
const [rule] = sheet.cssRules;
console.log(rule.selectorText);
// Sonderränder nicht mehr auf der ersten, sondern auf allen rechten Seiten
rule.selectorText = ':right';
console.log(rule.selectorText);
console.log(rule.cssText);Ungültige Zuweisung wird ignoriert
const sheet = new CSSStyleSheet();
sheet.replaceSync('@page :left { margin: 1cm; }');
const [rule] = sheet.cssRules;
// .foo ist kein gültiger Seitenselektor
rule.selectorText = '.foo';
console.log(rule.selectorText); // unverändert
const setPageSelector = (pageRule, selector) => {
const before = pageRule.selectorText;
pageRule.selectorText = selector;
return pageRule.selectorText !== before || before === selector;
};
console.log(setPageSelector(rule, ':first'));// Wichtig · Fallstricke
- Keine Fehlermeldung: Wenn Sie einen ungültigen Selektor zuweisen, wird er ohne Meldung verworfen. Lesen Sie den Wert danach noch einmal aus, wenn Sie sicher sein müssen, dass die Änderung übernommen wurde.
- Nur Seitenselektoren: Hier sind nur Seitentypnamen und die Pseudoklassen
:first,:left,:rightund:blankerlaubt. Normale CSS-Selektoren wie Klassen oder IDs gehen nicht. - Normalisierung: Der Browser kann den gelesenen Wert anders formatieren als den geschriebenen, etwa bei Leerzeichen oder Groß-/Kleinschreibung. Vergleichen Sie deshalb besser mit dem ausgelesenen Wert.
- Fremde Stylesheets: Bei Stylesheets von anderen Ursprüngen (Cross-Origin) löst der Zugriff auf
cssRuleseinenSecurityErroraus. Dann erreichen Sie auchselectorTextnicht. - Kompatibilität: Lesen funktioniert in allen modernen Browsern. Beim Schreiben und bei benannten Seiten (
@page name) gab es in älteren Browsern Unterschiede. Die Seitenpseudoklasse:blankwird kaum unterstützt.