style.setProperty不呈现

Question

似乎使用此功能会更便携或更可靠，因为替代方法是设置属性：

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

第二种方法似乎也略微低效，尽管这并不是一个问题。

但至少在Chrome上，除非我使用setAttribute方法，否则该样式不会在页面上更新。

这是一个问题的原因是，我可能有许多不同的单独样式属性，我想独立于其他属性进行修改。如果我不能使用setProperty，removeProperty等，我必须进行大量的字符串解析和处理。我必须提取样式字符串，搜索它，修改它，以及通过setAttribute重新设置它。应该工作，但我不喜欢它。

这有什么理由吗？这是一个错误吗？我的猜测是setAttribute触发浏览器执行重新渲染的内容。什么是强制此更新的合适方式，通常是浏览器友好的？

Answer 1

直接设置style属性可能会产生不良后果：它将清除元素style属性中设置的所有现有样式，而setAttribute在旧IE中被破坏（和以后IE中的兼容模式）。更安全的是直接使用元素的style属性来设置所需的样式属性：

element.style[styleproperty] = valuestring;

这将立即在所有主流浏览器中更新页面。

一个警告：CSS样式属性（通常使用破折号，例如在background-color中）不会精确映射到DOM元素的style对象的属性（通常是驼峰案例，例如{{1} }}）。这条规则也有例外。