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

Question

我们有一个div标签：<div id='div1' style="background-color:red"></div> 我想知道如何更改这个div标签的样式属性：-

1. 我们可以清除样式值吗？

2. 我们可以在现有的样式属性上附加值吗？

3. 我们可以设置新的样式属性值吗？

谢谢您的帮助。

- variable

---

也许可以使用JavaScript或jQuery动态修改CSS类属性值：https://dev59.com/c2w05IYBdhLWcg3wnjPC - sshashank124

我想要类似于 document.getelementbyid（更改属性）的东西。 - variable

使用所有HTML节点都具有的.style属性。 - David

你可以使用jQuery的addClass或removeClass。 - Dexter

这是关于样式属性的，另一个是关于类属性的。 - variable

可能是重复的问题：JavaScript修改元素的样式。 - T J

Answer 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 Style: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

- David

Answer 2

使用setAttribute()方法，可以覆盖和添加新值到属性中。

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

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

- Suman Bogati

Answer 3

你可以使用JS这种方式来添加样式 -

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

- halkujabra

Answer 4

你可以尝试像这样做，例如：

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

- jPratas