Блог

Следующее, похоже, соответствует основным браузерам:

 const stylesheet = document.createElement('style');
document.head.appendChild(stylesheet);

const sheet = document.styleSheets[0];
sheet.addRule('.temp', '{}', 0);
const style = sheet.cssRules[0].style;

console.log(style.color); // ""
style.setProperty("color", "*****");
console.log(style.color); // ""
style.setProperty("color", "red")
console.log(style.color); // "red"
 

Но я хотел бы знать: можно style.setProperty("color", "*****") ли полагаться на то, чтобы не устанавливать свойство, или это просто совпадающая функция в основных браузерах прямо сейчас.

Если под «полагаться» вы подразумеваете, указано ли это в стандарте, то да, это так.

Соответствующим стандартом является CSSOM, а для setProperty в нем говорится

6. Пусть список значений компонента будет результатом синтаксического анализа значения для свойства property.
7. Если список значений компонента равен null, завершите эти шаги.

и для анализа значения, которое он говорит

1. Пусть list — значение, возвращаемое вызовом parse списка значений компонентов из value .
2. Сопоставьте список с грамматикой для свойства property в спецификации CSS.
3. Если вышеуказанный шаг не удался, верните null .
4. Возвращаемый список.

Таким образом, если «*****» отсутствует в списке разрешенных значений цвета, будет возвращен null

Затем для получения style.color он говорит

Атрибут атрибута с верблюжьей оболочкой при получении должен возвращать результат вызова GetPropertyValue() с аргументом, являющимся результатом выполнения алгоритма IDL атрибута свойства CSS для атрибута с верблюжьей оболочкой.

а затем для GetPropertyValue() говорится

3. Если свойство чувствительно к регистру для имени свойства объявления CSS в объявлениях, верните результат вызова сериализации значения CSS этого объявления и завершите эти шаги.

Наконец, значения null сериализуются как пустая строка.