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

Question

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

我想知道如何更改此div标签的style属性： -

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

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

3. 我们可以为样式属性

设置新值

提前致谢。

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

Answer 2

您可以使用js -

以这种方式添加样式

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

Answer 3

使用setAttribute()覆盖并在属性上添加新值。

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

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

Answer 4

您可以尝试这样的事情，例如：

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