在div元素上设置样式属性

Question

我有以下div元素

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

有没有办法使用JavaScript更改此div标签的style属性？

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

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

创建新的样式属性并将此属性替换为新属性

即：

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

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);

Answer 2

  

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

如果要替换元素上的现有样式属性（或者如果不存在则创建一个），请使用：

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

如果要为现有规则添加新的样式属性，那么它将是：

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

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

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");