Блог

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

 element.style.setProperty(styleproperty, valuestring);
element.setAttribute('style',styleproperty ': ' valuestring ';');
  

Второй метод также может показаться немного более неэффективным, хотя это вряд ли вызывает беспокойство.

Но, по крайней мере, в Chrome, стиль не обновляется на странице, если я не использую этот setAttribute метод.

Причина, по которой это небольшая проблема, заключается в том, что у меня потенциально много разных отдельных свойств стиля, которые я хочу изменить независимо от других. Мне приходится выполнять много синтаксического анализа и обработки строк, если я не могу использовать setProperty removeProperty , и т.д. Я должен извлечь строку стиля, выполнить поиск в ней, изменить ее и установить обратно в via setAttribute . Должно сработать, но мне это не нравится.

Есть ли причина для этого? Это ошибка? Я предполагаю, что setAttribute это запускает что-то для браузера для выполнения повторного рендеринга. Каков подходящий способ принудительного обновления, который обычно удобен для браузера?

style Прямая установка атрибута имеет последствия, которые могут быть нежелательными: он уничтожит все существующие стили, установленные в атрибуте элемента style , и setAttribute нарушается в более старом IE (и режимах совместимости в более поздних IE). Гораздо безопаснее использовать свойство элемента style напрямую, чтобы установить только то свойство стиля, которое вам нужно:

 element.style[styleproperty] = valuestring;
  

Это немедленно обновит страницу во всех основных браузерах.

Одно предостережение: свойства стиля CSS (обычно с использованием тире, например, in background-color ) не сопоставляются точно со свойствами объекта элемента style DOM (обычно случай верблюда, например, in backgroundColor ). Из этого правила также есть исключения.