Question

就像每个人都知道的那样，我们可以使用CSS来设置元素的样式，如下面的

  #a {
     background-color : green;
  }

使用JS

  document.getElementById('a').style.backgroundColor = "green";

但我想创建一些像background-color这样的属性，可以在CSS中使用。例如，我将创建一个像＆＃34; foobar＆＃34;那么我应该可以像下面那样使用它

  #a {
     foobar : value;
  }

这可能吗？我想在包含此属性的元素上执行一些JS。

在被称为重复的问题中的答案是如何使用现有的CSS属性创建新的CSS并将其添加到样式表中。但在这里，我正在尝试创建自己的css属性......

Answer 1

我想在包含此属性的元素上执行一些JS。

虽然你可以只是将随机属性写入style对象：

myElement.style.foobar = "value";

在Chrome，Firefox，IE11，甚至是IE8上

...和that seems to survive，我强烈建议不要。

使用类或data-*属性可以更好地。一方面，您可以查询它们。

如果您正在尝试创建自己的CSS（您在评论中说的话），我认为data-*属性将是一个不错的选择。

使用课程：

var myElement = document.createElement('a');
myElement.className = "foobar";
// ...add it somewhere...

// Later
var myElements = document.querySelectorAll(".foobar");
// ...do something with the list...

或data-*属性：

var myElement = document.createElement('a');
myElement.setAttribute("data-foobar", "value");
// ...add it somewhere...

// Later
var myElements = document.querySelectorAll('[data-foobar="value"]');
// ...do something with the list...

所有现代浏览器以及IE8都支持

querySelectorAll。

Answer 2

你不能在javascript中实现这样的东西，而像你在SASS和Less中可以做的事情。你必须用属性来定义变量，例如@myblackcolor：＃000000;。这个@myblackcolor你可以在ur css中的任何地方使用，而不是一次又一次地写颜色：#ffff。

Answer 3

为什么不在样式表中定义类，并根据某些条件通过JavaScript动态地将它们分配给新创建的元素？这样你就不需要任何DOM遍历了。例如：

/* in your stylesheet */
.classOne{
    font-weight: bold;
    background-color: #808080;
}

.classTwo{
    width: 100%;
    background-color: #000000;
}


//then in your JavaScript
var elt = document.createElement("button");
if(condition a){
    elt.className = "classOne";
    //other scripts related to elt given class name is classOne
}else if(condition b){
    elt.className = "classTwo";
    //other scripts related to elt given class name is classTwo
}

使用JavaScript创建CSS样式属性

3 个答案: