风格.setProperty不渲染

style.setProperty does not render

本文关键字：setProperty 风格更新时间：2023-09-26

使用这个函数似乎更可移植或更可靠，因为另一种选择是设置一个属性:

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

第二种方法似乎也稍微低效一些，但这几乎不是问题。

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

为什么这是一个问题的原因，是我有潜在的许多不同的独立的样式属性，我想要修改独立于其他的。如果我不能使用setProperty, removeProperty等，我必须做大量的字符串解析和处理。我必须拉出样式字符串，搜索它，修改它，并通过setAttribute设置它。应该可以，但是我不喜欢。

这有什么原因吗?这是臭虫吗?我的猜测是setAttribute触发浏览器执行重新渲染。什么是一种合适的方式来强制这种更新，通常是浏览器友好的?

直接设置style属性可能会产生不希望看到的结果:它将清除元素的style属性中设置的所有现有样式，并且setAttribute在旧的IE中被破坏(以及在后来的IE中兼容模式)。更安全的方法是直接使用元素的style属性，只设置你需要的style属性:

element.style[styleproperty] = valuestring;

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

一个警告:CSS样式属性(通常使用破折号，例如在background-color中)不精确地映射到DOM元素的style对象的属性(通常是驼峰情况，例如在backgroundColor中)。这个规则也有例外。