CSSFontPaletteValuesRule: Eigenschaft overrideColors
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2022 browserübergreifend verfügbar.
Die schreibgeschützte Eigenschaft overrideColors der Schnittstelle CSSFontPaletteValuesRule ist ein String mit einer Liste von Paaren aus Farbindex und Farbe, die stattdessen verwendet werden sollen. Sie wird im selben Format wie der entsprechende Deskriptor override-colors angegeben.
Wert
Ein String mit einer durch Kommas getrennten Liste von Paaren aus Farbindex und Farbe.
Beispiele
Die überschriebene Farbe auslesen
Dieses Beispiel definiert zunächst einige At-Rules, darunter zwei @font-palette-values. Die Infrastruktur für interaktive Beispiele von MDN fasst alle CSS-Blöcke des Beispiels in einem einzigen Inline-Stylesheet mit der ID css-output zusammen. Daher verwenden wir zuerst document.getElementById(), um dieses Stylesheet zu finden.
HTML
<div class="hat">
<div class="emoji colored-hat">🎩</div>
</div>
<button>Toggle color</button>
<pre id="log"></pre>
CSS
@font-face {
font-family: "Noto Color Emoji";
font-style: normal;
font-weight: normal;
src: url("https://mdn.github.io/shared-assets/fonts/noto-color-emoji/NotoColorEmoji-Regular.woff2")
format("woff2");
}
.emoji {
font-family: "Noto Color Emoji", emoji;
font-size: 3rem;
}
@font-palette-values --blue {
font-family: "Noto Color Emoji";
override-colors:
3426 rgb(1 28 193),
4614 rgb(60 124 230);
}
@font-palette-values --green {
font-family: "Noto Color Emoji";
override-colors:
3426 rgb(28 193 1),
4614 rgb(34 230 1);
}
.colored-hat {
font-palette: --blue;
}
JavaScript
const log = document.getElementById("log");
const button = document.querySelector("button");
const hat = document.querySelector(".colored-hat");
const rules = document.getElementById("css-output").sheet.cssRules;
const greenFontPaletteValuesRule = rules[3];
const blueFontPaletteValuesRule = rules[2];
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
button.addEventListener("click", (event) => {
if (hat.style.fontPalette !== "--green") {
hat.style.fontPalette = "--green";
log.textContent = `Overridden colors: ${greenFontPaletteValuesRule.overrideColors}`;
} else {
hat.style.fontPalette = "--blue";
log.textContent = `Overridden colors: ${blueFontPaletteValuesRule.overrideColors}`;
}
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # dom-cssfontpalettevaluesrule-overridecolors |
Browser-Kompatibilität
Siehe auch
- At-Rule
@font-palette-values - Deskriptor
override-colors