Браузеры автоматически преобразуют цвета hex или hsl в rgb при настройке через element.style.background?

ProgramBox

Браузеры автоматически преобразуют цвета hex или hsl в rgb при настройке через element.style.background?

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#css #google-chrome-devtools

#javascript #HTML #css #браузер #Цвет

Вопрос:

Я не уверен, что я упускаю что-то очевидное, но кто-нибудь может мне это объяснить? Следующий фрагмент взят из того, что я сделал в консоли Chrome DevTools. Такой же результат для 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>

Вот изображение для лучшей читаемости.

Это стандартное поведение? Если да, то как мне поместить реальное значение HEX или HSL в встроенный стиль?

1. Потому что это то, что делают браузеры. Зачем вам это нужно в hex?

2. чтобы позже я мог запросить его обратно в той же форме, в которой я его установил. При существующем поведении я должен либо преобразовать его обратно, либо сохранить отдельный атрибут данных

3. Или используйте класс css и не беспокойтесь об этом. Чем, если вам нужно посмотреть, имеет ли он цвет XYZ, вы бы знали, что вместо этого нужно искать класс XYZ.

4. Я не могу этого сделать в моем случае, потому что все элементы генерируются из набора данных, который представляет собой просто массив цветов в разных форматах. Строки. Я был бы не против, если бы браузеры вели себя таким образом, но я хотел бы знать, почему они это делают, или указатель на спецификацию, в которой говорится, что браузеры должны делать.

5. У меня есть обходной data- путь — это атрибут, потому что я не хочу выполнять вычисления для преобразования цвета. 🙁

Ответ №1:

Согласно спецификации:

Если значение полупрозрачное, вычисленное значение будет rgba() соответствующим. Если это не так, он будет rgb() соответствующим.

Это означает, что независимо от того, что вы вводите, вычисленное значение всегда приводит к либо rgb или rgba .

Итак, отвечая на ваш вопрос: да, это стандартное поведение, и нет, вы не можете использовать hex или hsl, поскольку они будут вычислены обратно в rgba.

1. Круто! Спасибо, что указали на это. Я должен был посмотреть спецификацию для вычисляемого значения. Самое смешное, что я не вижу, чтобы то же самое происходило с именованными цветами, такими как green , white и т.д.

2. Я уже вижу эту строку повсюду, но, похоже, не могу найти ее в фактической спецификации W3C. Когда я просто гуглю строку, она появляется в любой статье о MDN, связанной с цветом, но, похоже, я не могу найти ее в фактической спецификации (даже в их связанных спецификациях или спецификации вычисляемого значения)… Можете ли вы дать мне указания по этому поводу?

Ответ №2:

Мое решение таково… использовать «outerHTML»! Это единственное место, откуда мы можем извлечь подлинный формат цвета.

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

возвращает «#ffff00», а не «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>
-->

Попробуйте с этим…