在div元素上设置样式属性

Question

我有一个下面的div元素：

<div style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

有没有办法使用JavaScript更改此div标记的样式属性？

具体来说，我想要做以下事情：

将此样式属性设置为另一个字符串，例如style="test"

创建一个新的样式属性，并用新的属性替换此属性

即：

var new_style_a = document.createAttribute("style");
(somehow insert this new attribute into the div tag)

- SivaDotRender

Answer 1

首先，您需要获取一个指向您的div的JS引用-为了简单起见，现在让我们只为其分配一个ID；

<div id='myDiv' style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

然后在JS中...

document.getElementById('myDiv').style.color = '#FF0000';

编辑：为了反映您编辑后的问题。如果您只想将属性的值设置为某个字符串（仅供记录，如果您这样做以影响样式，这不是最好的方法），您可以执行以下操作：

document.getElementById('myDiv').setAttribute('style','somestring');

再次编辑：如果您坚持使用document.createAttribute...

var attr = document.createAttribute('style');
attr.value = 'somestring';
document.getElementById('myDiv').setAttributeNode(attr);

- Dal Hundal

---

我想要做类似这样的事情： var new_style_a = document.createAttribute("style"); （以某种方式将此新属性插入到div标签中） - SivaDotRender

Answer 2

有没有办法使用JavaScript更改此div标记的style属性？具体来说，我想做以下事情：将此样式属性设置为另一个字符串，例如style =“test”。

如果您想替换元素上现有的style属性（或者如果不存在，则创建一个属性），那么请使用：

document.getElementById('elemId').setAttribute('style','width:100px;');

如果你想要给现有规则添加一个新的样式属性，那么可以像这样操作：

document.getElementById('elemId').style.setAttribute('width', '150px');

您需要能够引用那个 div。最好是给它一个唯一的 id，并使用 getElementById 引用它。

- Abhitalks

Answer 3

你需要让JS通过id引用你的div元素。

HTML

<div id="elem-change" style="color:#0000FF">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

JS

if (document.getElementById("elem-change")) {
         document.getElementById("elem-change").style.color = "#0000FF";
}

或者

document.getElementById('elem-change').setAttribute('style','color :#0000FF');

JQUERY

$("#elem-change").css("color", "#0000FF");

- Darren Willows