如何动态更改 DIV 标签的 CSS 样式属性？答案

【问题标题】：How to dynamically change CSS style attribute of DIV tag?如何动态更改 DIV 标签的 CSS 样式属性？
【发布时间】：2014-03-22 11:30:14
【问题描述】：

我们有一个 div 标签：<div id='div1' style="background-color:red"></div>

我想知道如何改变这个div标签的样式属性：-

我们可以清除样式值吗？
我们可以将值附加到现有的样式属性吗？
我们能否为样式属性设置新值

提前致谢。

【问题讨论】：

也许：stackoverflow.com/questions/7125453/…
我想要类似 document.getelementbyid 的东西（更改属性）
使用所有 HTML 节点都有的 .style 属性。
可以使用jquery的addclass或者removeclass
这是关于样式属性的，另一个是关于类属性的..

标签： javascript css

【解决方案1】：

var div = document.getElementById('div1');

// Clear Value
div.setAttribute('style','');
  // OR
div.removeAttribute('style');

// Set Style / Append Style
div.style.backgroundColor = '#ff0000';

添加或更改样式时不要直接修改样式属性，除非您想全部删除。

JavaScript removeAttribute: https://developer.mozilla.org/en-US/docs/Web/API/Element.removeAttribute Javascript 风格：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

【讨论】：

【解决方案2】：

你可以通过这种方式使用js添加样式-

document.getElementById('#div1').style += "padding-top:40px";

【讨论】：

【解决方案3】：

使用setAttribute() 覆盖属性并为其添加新值。

var div = document.getElementById('div1');
// div.setAttribute('property', 'value');

div.setAttribute("style", "color: green; align:center;");

【讨论】：

【解决方案4】：

你可以试试这样的，例如：

$("#div1").css("property",'value');

【讨论】：