Блог

Главная - Вопросы по программированию - Почему объект стиля DOM не устанавливает переменные CSS напрямую?

Почему объект стиля DOM не устанавливает переменные CSS напрямую?

#javascript #css #dom

#javascript #css #dom

Вопрос:

Насколько я понимаю, существует два эквивалентных способа установки правил CSS с помощью JavaScript:

 #1: element.style.setProperty(propertyName, value)

#2: element.style.propertyName = value

Я всегда предпочитал второй, более короткий метод.

Когда дело доходит до переменных CSS, я обнаруживаю, что мне приходится использовать явный вызов setProperty:

 element.style.setProperty('--varName', value)

Этот подход не влияет на переменные:

 element.style['--varName'] = value

Почему это?

Комментарии:

1. Вот мое предположение… но это всего лишь предположение. Способ style работы очень прост в том, что он переопределяет все стили из таблиц стилей (откладывая в сторону !important ) . Поскольку переменные CSS должны учитывать область действия переменной, я предполагаю, что setProperty() это просто выполняет больше фоновой работы, определяя, какая таблица стилей содержит правило с наивысшим приоритетом, и / или анализируя область действия данной переменной. Я полагаю, они могли бы создать :root область по умолчанию, но, по-видимому, не сделали этого. Опять же, просто предположение.

2. …вы можете найти свой ответ в спецификации для setProperty .

3. Вот спецификация для setProperty() . Вы можете видеть, что в нем есть шаг, специально предназначенный для работы с «пользовательским свойством», которое указано здесь и определено как «любое свойство, имя которого начинается с двух тире» . Таким образом, setProperty() метод специально разработан для работы с переменными CSS. Я предполагаю, что установщик style не настроен для его обработки, но я еще не смотрел.

Ответ №1:

Это потому, что функция стиля DOM понимает только свойства HTML, а не свойства CSS. Определяющие свойства CSS перечислены в функции setProperty стиля.

Комментарии:

1. Я не понимаю этот ответ. Нет свойств HTML, связанных со стилем, за исключением нескольких очень специфичных, привязанных к конкретным элементам. Каким образом style.backgroundImage это свойство HTML, а не CSS?

Ответ №2:

.style[propertyName] Ожидает имя свойства внутри, но не поддерживает пользовательское свойство, как .setProperty() это делает. Если вы передаете --varName , вы передаете значение, присвоенное скобкам.

Например, если --varName: 'blue' , говоря .style['--varName'] = value , вы предлагаете изменить свойство blue на value . Поскольку синий не является свойством, он не будет работать.

Комментарии:

1. Утверждение, что это должно работать , на самом деле не дает ответа. Если бы это сработало, я сомневаюсь, что OP задавал бы вопрос. Можете ли вы привести пример, показывающий, как это работает? --varName Синтаксис предназначен для установки переменных CSS и доступа к ним.

2. внутри скобок находится имя свойства, а не значение элемента. Например, если —varName равно ‘blue’, это не сработает, потому что blue — это не свойство, а значение

3. Первым аргументом setProperty также является имя свойства, и он заявил, что оно работает там. Кажется, что он пытается установить новую переменную и задается вопросом, почему это нельзя сделать с .style[...] синтаксисом.

4. .style[…] ожидает имя свойства внутри, а не значение. Если вы передаете --varName , вы передаете значение в скобки. Если --varName: 'blue' , говоря .style['--varName'] = value , вы предлагаете изменить свойство blue на value. Поскольку синий не является свойством, он не будет работать.

5. .setProperty также ожидает имя свойства, и это работает при использовании "--varName" . Это потому, что "--varName" это имя свойства при определении переменной. Он не пытается использовать значение; он пытается установить значение для этого имени переменной.

Ответ №3:

Вам нужно получить его из getComputedStyle

смотрите:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript

Чтобы использовать значения пользовательских свойств в JavaScript, это похоже на стандартные свойства.

// получить переменную из встроенного стиля

element.style.GetPropertyValue(«—my-var»);

// получить переменную откуда угодно

getComputedStyle(элемент).GetPropertyValue(«—my-var»);

// установить переменную для встроенного стиля

element.style.setProperty(«—my-var», jsVar 4);

 document.body.style.setProperty('--varName', 'see i got stored even i`m a useless value');
let root = window.getComputedStyle(document.body );
let varNameValue= root.getPropertyValue('--varName');
console.log(varNameValue);

Комментарии:

1. Он спрашивает, почему использование .style["--varName"] не работает, когда .setProperty работает.

2. @slappy это не может работать, потому что это недопустимый синтаксис, я думаю, это способ сделать это правильно.

3. Да, похоже, что они не разрешили этот синтаксис для style . Вопрос в том, почему они разрешили это в одном месте, а не в другом. На самом деле это интересный вопрос.

4. мне потребовалось некоторое время, чтобы найти правильную ссылку 😉 developer.mozilla.org/en-US/docs/Web/CSS /…