JavaScript：如何更改创建跨度的 CSS 样式？答案

【问题标题】：JavaScript: how to change CSS style of created span?JavaScript：如何更改创建跨度的 CSS 样式？
【发布时间】：2009-09-25 12:07:48
【问题描述】：

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

是否可以将innerHTML 中的文本设置为红色背景？我想将 style="background-color:red" 添加到刚刚创建的跨度中。可能吗？或者它必须有一些id，然后我可以用jQuery改变这个span？

【问题讨论】：

标签： javascript colors html

【解决方案1】：

足够简单：-

newNode.style.backgroundColor = "red";

【讨论】：

【解决方案2】：

最好给 span 一个类名

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

newNode.className = "spanClass";

【讨论】：

【解决方案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";

现在将style 设置为class

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

【讨论】：

【解决方案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()”允许您将动画使用的其他非标准属性和自定义 jquery 选项添加到 HTML 标准标签。

【讨论】：