如何用JavaScript修改元素背景色并设置!important优先级

问题出在setProperty方法的属性名格式上——这个方法要求第一个参数传入标准CSS属性名（横线分隔形式），而非DOM样式对象的驼峰写法。你尝试的backgroundColor是JS操作style时的驼峰命名，但setProperty需要的是原生CSS的background-color。

正确的代码写法是：

document.getElementById("usernamestatus").style.setProperty('background-color', 'red', 'important');

补充说明：

• 所有CSS属性在使用setProperty时都要保持和CSS文件中一致的写法，比如font-size、border-radius等，均不能用驼峰。
• 如果用驼峰写法直接操作style对象（比如element.style.backgroundColor = 'red'），是无法添加!important优先级的，这也是setProperty的优势场景。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi