Browser werten Hex- oder HSL-Farben automatisch zu RGB aus, wenn sie über element.style.background eingestellt werden?

Lesezeit: 3 Minuten

Ich bin mir nicht sicher, ob ich etwas Offensichtliches übersehe, aber kann mir das jemand erklären? Der folgende Ausschnitt stammt von dem, was ich in der Chrome DevTools-Konsole gemacht habe. Das gleiche ist das Ergebnis für Firefox.

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style="background: rgb(187, 187, 187);"></div>
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style="background: rgb(63, 191, 63);"></div>

Hier das Bild zur besseren Lesbarkeit.

Ist das das Standardverhalten? Wenn ja, wie kann ich den echten HEX- oder HSL-Wert im Inline-Stil eingeben?

Denn das tun Browser. Warum brauchst du es in Hex?

– epascarello

29. August ’16 um 14:33
damit ich es später in der gleichen Form, in der ich es eingestellt habe, wieder abfragen kann. Bei dem bestehenden Verhalten muss ich es entweder zurückkonvertieren oder ein separates Datenattribut pflegen

– Praveen Apulien

29. August ’16 um 14:56
Oder verwenden Sie eine CSS-Klasse und machen Sie sich keine Sorgen. Wenn Sie dann sehen müssen, ob es eine XYZ-Farbe hat, sollten Sie stattdessen nach der XYZ-Klasse suchen.

– epascarello

29. August ’16 um 14:57
Ich kann das in meinem Fall nicht tun, weil alle Elemente aus einem Datensatz generiert werden, der nur eine Reihe von Farben in verschiedenen Formaten ist. Saiten. Ich wäre mit Browsern einverstanden, die sich so verhalten, aber ich würde gerne wissen, warum sie dies tun, oder einen Hinweis auf eine Spezifikation, die besagt, dass Browser dies tun sollten.

– Praveen Apulien

29. August ’16 um 15:00
Die Problemumgehung, die ich habe, ist a data- -Attribut, weil ich keine Berechnung für die Farbkonvertierung durchführen möchte. 🙁

– Praveen Apulien

29. August ’16 um 16:32

Gemäß der spez:

Wenn der Wert durchscheinend ist, ist der berechnete Wert der rgba() entsprechende ein. Wenn nicht, wird es die rgb() entsprechende ein.

Das bedeutet, dass der berechnete Wert unabhängig von Ihrer Eingabe stets führt zu entweder rgb oder rgba.

Also um deine Frage zu beantworten: ja, es ist Standardverhalten und Nein, können Sie nicht hex oder hsl verwenden, da es zurück zu rgba berechnet wird.

Cool! Danke für den Hinweis. Ich hätte mir die Spezifikation für den berechneten Wert ansehen sollen. Das Lustige ist, dass ich nicht sehe, dass das Gleiche für benannte Farben wie passiert green, white etc.

– Praveen Apulien

29. August ’16 um 16:42
Ich sehe diese Zeile mittlerweile überall, aber ich scheine sie in der aktuellen W3C-Spezifikation nicht zu finden. Wenn ich einfach die Zeile googele, taucht sie in jedem farbbezogenen Artikel auf MDN auf, aber ich kann sie anscheinend nicht in der tatsächlichen Spezifikation finden (nicht einmal in den verlinkten Spezifikationen oder der berechneten Wertspezifikation) … Können Sie? gib mir da eine richtung?

– Tarulia

15. April ’17 um 8:09

RGill

Meine Lösung ist… um “outerHTML” zu verwenden ! Nur hier können wir das echte Farbformat extrahieren.

function realBkgColor(elem){
    let outer = elem.outerHTML.replace(/s/g,'');
    let tag = outer.split('<'+elem.tagName).pop().split('>')[0];
    let style = tag.split('style="').pop().split('"')[0];
    let color = style.split('background-color:').pop().split(';')[0];
    return color;
}
div = document.querySelector('div');
div.innerHTML = realBkgColor(div);

gibt “#ffff00” zurück und nicht “rgb(255, 255, 0)”

<div style="background-color: #ffff00"></div>
<!--
<div style="background-color: rgb(255, 255, 0)"></div>
<div style="background-color: hsl(60, 100%, 50%)"></div>
<div style="background-color: yellow"></div>
-->

Versuchen Sie es mit diesen…

2973900cookie-checkBrowser werten Hex- oder HSL-Farben automatisch zu RGB aus, wenn sie über element.style.background eingestellt werden?

#Browser #CSS #Farben #html #Javascript