JavaScript：如何更改创建的span元素的CSS样式？

Question

  newNode = document.createElement("span");
  newNode.innerHTML = "text";
  range.insertNode(newNode);

是否可以将innerHTML中的文本设置为红色背景？我想要在刚创建的span中添加style="background-color:red"。这种做法可行吗？或者必须给它一个id，然后才能使用jQuery更改这个span元素？

- mm.

Answer 1

很简单：

newNode.style.backgroundColor = "red";

- AnthonyWJones

Answer 2

最好为span元素指定一个类名。

<style>
    .spanClass { background-color: red; }
</style>

newNode.className = "spanClass";

- rahul

Answer 3

这是我的解决方法：

var spanTag1 = document.createElement('span');
spanTag1.innerHTML = '<span style="color:red">text</span>';

或者

使用 js 添加 class，并将 css 设置为该 class

var spanTag1 = document.createElement('span');
spanTag1.className = "mystyle";

现在将 class 的样式设置为 style。

<style> 
    .mystyle {
        color:red;
    }
</style>

- Renascent

Answer 4

你可以直接向DOM对象添加属性。样式属性也可以通过这种方式赋值。例如：

var span = document.createElement("span");
span.setAttribute("style","color:white;background-color:red;");

var text = document.createTextNode("My text");
span.appendChild(text);

当然，您需要将创建的该元素添加到其父对象中：

var parent = document.getElementById("parentObject");
parent.appendChild(span);

这个方法"setAttribute()"可以让您向HTML标准标签添加其他非标准属性，用于动画和自定义jQuery选项。

- Víctor