javascript - Webbläsare utvärderar automatiskt hex- eller hsl-färger till rgb när de sätts via element.style.background?

Jag är inte säker på om jag missar något uppenbart, men kan någon förklara detta för mig? Följande kodsnutt är från det jag gjorde i Chrome DevTools Console. Samma resultat gäller 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>

Här är bilden för bättre läsbarhet.

Är detta standardbeteendet? Om så är fallet, hur får jag in det verkliga HEX- eller HSL-värdet i inline-stil?

Svar #1

Enligt specifikationen:

Om värdet är genomskinligt kommer det beräknade värdet att vara motsvarande rgba(). Om det inte är det kommer det att vara motsvarande rgb().

Det betyder att oavsett vad din inmatning är, resulterar det beräknade värdet alltid i antingen rgb eller rgba.

Så, för att svara på din fråga: ja, det är standardbeteende och nej, du kan inte använda hex eller hsl eftersom det kommer att beräknas tillbaka till rgba.

Svar #2

Min lösning är... att använda "outerHTML"! Det är det enda stället från vilket vi kan hämta det riktiga färgformatet.

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);

returnerar "#ffff00" och inte "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>
-->

Prova det med dessa...