CSS Типизированный ОМ - разбор цвета фона?

Question

const box = document.getElementById('rb');

console.log(box.computedStyleMap().get('background-color'))

.red {
  background-color: #FF0000;
}

.box {
  width: 100px;
  height: 100px;
}

<div id="rb" class="box red"></div>

Используя новую типизированную объектную модель CSS, я пытаюсь получить цвет фона этого элемента. Он возвращает мне CSSStyleValue, который, похоже, имеет метод toString(). Я надеялся, что он разберет цвет в RGB-триплет или что-то еще полезное, например, для ширины.

Есть ли API для разбора цветов, или это еще не определено?

(Я знаю, что могу разобрать строку вручную, вопрос не в этом)

Answer 1

Ваше предположение весьма запутанно ...

Типизированный ОМ CSS предназначен для извлечения CSS значений, поскольку они были внутренне сохранены от анализа созданных значений.

Нет смысла использовать его, если вы используете sh стандартизированное отформатированное значение , поскольку этот API действительно предназначен для того, чтобы обойти тот факт, что современные API возвращают только то, что отформатированное значение .

Так что, если вы действительно используете sh стандартизированное форматированное значение, просто используйте getComputedStyle, который согласно спецификации будет сериализовать компонент в соответствии с этими правилами :

• Если является компонентом разрешенного или вычисленного значения, верните цвет, используя функциональную запись rgb() или rgba(), следующим образом:

  1. Если альфа-компонент цвета равен единице, вернуть сериализацию функционального эквивалента непрозрачного цвета rgb().
  2. Если альфа-компонент цвета не равен равный единице, затем возвращает сериализацию rgba() функционального эквивалента непрозрачного цвета.

Другими словами, если оно непрозрачное, оно всегда будет rgb(), а если оно имеет альфа, всегда rgba().

document.querySelectorAll('.test > div').forEach( elem => {
  console.log( 'formatted as', getComputedStyle(elem)['background-color'] );
} );

.named-color { background-color: magenta; }
.currentcolor { background-color: currentColor; }
.no-alpha-hex { background-color: #FF00FF; }
.no-alpha-rgb { background-color: rgb(255,0,255); }
.no-alpha-rgb-perc { background-color: rgb(100%,0%,100%); }
.no-alpha-hsl { background-color: hsl(300deg, 100%, 50%); }
.no-alpha-rgba { background-color: rgb(255,0,255,1); }
.no-alpha-rgba-perc { background-color: rgb(100%,0%,100%,1); }
.no-alpha-hsla { background-color: hsl(300deg, 100%, 50%,1); }
.alpha-hex { background-color: #FF00FF80; }
.alpha-rgba { background-color: rgba(255,0,255,0.5); }
.alpha-rgba-perc { background-color: rgba(100%,0%,100%,0.5); }
.alpha-hsla { background-color: hsla(300deg, 100%, 50%,0.5); }

.test { color: magenta; }
.test > div {
  width: 100%;
  height: 5px;
}

<div class="test">
  <div class="named-color"></div>
  <div class="currentcolor"></div>
  <div class="no-alpha-hex"></div>
  <div class="no-alpha-rgb"></div>
  <div class="no-alpha-rgb-perc"></div>
  <div class="no-alpha-hsl"></div>
  <div class="no-alpha-rgba"></div>
  <div class="no-alpha-rgba-perc"></div>
  <div class="no-alpha-hsla"></div>
  
  <div class="alpha-hex"></div>
  <div class="alpha-rgba"></div>
  <div class="alpha-rgba-perc"></div>
  <div class="alpha-hsla"></div>
</div>

Если и когда CSS Typed OM представит CSSColorValue, им придется обрабатывать все эти форматы (и многие новые, представленные CSS -colors-4) отдельно, что означает, что вам придется написать еще больше кода для обработки всех возможных значений

Answer 2

Вы можете использовать этот холст из этого ответа, чтобы всегда получать шестнадцатеричный код:

{ ссылка }

var ctx = document.createElement('canvas').getContext('2d');
ctx.strokeStyle = 'rgb(64, 128, 192)';
var hexColor = ctx.strokeStyle;

Answer 3

Я считаю, что tl; dr - это то, что он еще не поддерживается, но планируется: https://github.com/w3c/css-houdini-drafts/issues/159