用JavaScript设置CSS属性字符串

Set CSS Property by string with JavaScript

本文关键字：属性 字符串 CSS 设置 JavaScript      更新时间：2023-09-26

所以我看到了这个问题-通过Javascript获取/设置CSS属性值:问题和这个解决方案- http://www.w3schools.com/jsref/dom_obj_style.asp.

我的问题不同的是我正在构建一个所见即所得的编辑器，我想通过原生javascript动态设置属性。所以我想知道是否有一种方法可以这样做:

document.getElementById("myH1").style.property("color") = "red";

正确的方法是使用setProperty或setPropertyValue:

element.style.setProperty("background-color", "red");
element.style.setPropertyValue("background-color", "red");

它们的行为相同，唯一的区别是setProperty接受可选的第三个参数来设置!important优先级。

然而，为了方便起见，CSSStyleDeclaration接口被部分接口扩展，以便允许使用IDL驼峰式属性获取或设置支持的CSS属性的值。

这意味着你也可以使用

element.style.backgroundColor = "red";
element.style["backgroundColor"] = "red";

是的，你可以使用驼峰大小写表示法来命名样式名，或者像使用数组名那样指定样式名

document.getElementById("myH1").style.color = "red";
document.getElementById("myH1").style["color"] = "red";

下面是它的实际操作:http://jsfiddle.net/m7kb2Lsa/

如果你想看到你可以在一个元素上设置的所有样式，我发现最简单的方法是在控制台中输入这样的东西(假设该元素存在于页面上)，这会给你一个你可以设置的所有东西的完整列表:

document.getElementById("myH1").style
相关文章：