CSSFontPaletteValuesRule: overrideColors-Eigenschaft
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 Farbindizes und Farbwerten, die stattdessen verwendet werden sollen. Sie hat dasselbe Format wie der entsprechende Deskriptor override-colors.
Wert
Ein String mit einer durch Kommas getrennten Liste von Farbindizes und Farbwerten.
Beispiele
Überschriebene Farben auslesen
In diesem Beispiel werden zunächst einige At-Regeln definiert, darunter zwei @font-palette-values-Regeln. Die MDN-Infrastruktur für interaktive Beispiele fasst alle CSS-Blöcke des Beispiels zu 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
@font-palette-values-At-Regeloverride-colors-Deskriptor