使用JavaScript动态更改元素的样式属性

Question

我有一个用于

的样式表。现在我想使用JavaScript动态修改

的一个属性。

我该如何做到这一点？

document.getElementById("xyz").style.padding-top = "10px";

这个正确吗？

- jslearner

Answer 1

除了其他答案之外，如果您想要使用破折号表示样式属性，您也可以使用以下方法：

document.getElementById("xyz").style["padding-top"] = "10px";

[2023年编辑] 这是一个非常老的回答。对于可能感兴趣的人：我创建了一个小型库，可以动态更改样式 @Github。

- KooiInc

---

我也是这样想的，这对于动态函数非常有用。一个人可以将样式作为字符串值传递，然后设置样式和值。很棒的解决方案。 - raphie

此外，补充一下@raphie所说的，你也可以使用document.getElementById("xyz").style["paddingTop"] = '10px'。 - Toothbrush

Answer 2

这几乎是正确的。

-是JavaScript运算符,所以在属性名中不能使用它。如果你设置类似border或者其他单词的属性，你的代码会工作得很好。

然而，对于像padding-top这样有连字符的属性名称，你需要记住在JavaScript中，需要将连字符删除，并将下一个字母大写，所以在你的情况下应该使用paddingTop。

还有一些例外情况。JavaScript有一些保留字，因此你不能像那样设置float。相反，在某些浏览器中，你需要使用cssFloat，而在其他浏览器中则需要使用styleFloat。正是因为这种差异，建议您使用像jQuery这样的框架，以处理浏览器不兼容性...

- David Hedlund

Answer 3

还有style.setProperty函数：
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

- icl7126

Answer 4

我用以下方法解决了类似的问题：

document.getElementById("xyz").style.padding = "10px 0 0 0";

希望能对您有所帮助。

- chairul

---

这种做法的缺点是你会将其他边的填充设置为 0。有时候你并不想要这样。 - Gustavo Straube

Answer 5

假设您有以下HTML代码：

<div id='thediv'></div>

如果您想修改此div的样式属性，可以使用以下代码：

document.getElementById('thediv').style[ATTRIBUTE] = '[VALUE]'

将[ATTRIBUTE]替换为您想要的样式属性。记得删除“-”并使后面的字母大写。

示例

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

- JohnP

---

正如被接受的答案所述，有一些例外情况。比如 float。 - Gustavo Straube

Answer 6

惊讶于我没有看到以下的查询选择器方式解决方案：

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration解决方案，接受答案的示例。

document.getElementById('xyz').style.paddingTop = "10px";

- Rama Adaikkalam

Answer 7

我建议使用一个函数来处理这个问题，该函数接受元素ID和包含CSS属性的对象。这样可以一次性编写多个样式，并使用标准的CSS属性语法。

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

更好的方法是将样式存储在变量中，这将使属性管理更加容易，例如：

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

希望这能帮到您。

- rjbultitude

Answer 8

document.getElementById("xyz").setAttribute('style','padding-top:10px');

也可以胜任这份工作。

- Pinkesh Badjatiya

---

这种方法的缺点是会删除任何其他行内样式，因为您替换了整个属性值。我想获取当前样式，检查要设置的属性是否存在现有值，然后添加/替换所需值可能是更好的解决方案。 - Gustavo Straube

同意。但是OP需要更接近他已经在做的解决方案，而这并没有考虑到你的用例。这是实现这一点最简单的方法之一，但肯定不是最好的方法。 - Pinkesh Badjatiya

@GustavoStraube，我不会称之为缺点。在许多情况下，这正是开发人员想要做的-即覆盖元素的样式。我会称之为以这种方式做事情的后果。 - stwr667

Answer 9

document.getElementById("xyz").style.padding-top = '10px';

将会是

document.getElementById("xyz").style["paddingTop"] = '10px';

- T.Todua

Answer 10

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

适合我使用。

- Hyperion