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

我有一个div的特定样式表。现在，我想使用js动态修改div的一个属性。

我该怎么做？

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

这样对吗？

几乎是正确的。

由于-是JavaScript运算符，因此您实际上不能在属性名称中使用它。如果您正在设置，border或者类似的单字形式，那么您的代码就可以正常工作。

但是，您需要记住的内容padding-top以及任何带连字符的属性名称，是在javascript中，您删除了连字符，并使下一个字母变为大写，因此应为paddingTop。

还有其他一些例外。JavaScript有一些保留字，因此float，例如，您不能这样设置。相反，在某些浏览器中需要使用，cssFloat而在其他浏览器中则需要使用styleFloat。对于这样的差异，建议您使用诸如jQuery之类的框架，该框架可以为您处理浏览器的不兼容性。

除其他答案外，如果要对样式属性使用破折号，则还可以使用：

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

我通过以下方式解决了类似的问题：

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

希望有帮助。

还有一个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');

假设您有这样的HTML：

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

如果要修改此div的style属性，请使用

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

替换[ATTRIBUTE]为所需的样式属性。请记住删除“-”并使以下字母大写。

例子

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

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

将会

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

我建议使用一个函数来处理此问题，该函数接受元素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);

希望能有所帮助

感到惊讶的是我没有看到下面的查询选择器方式解决方案，

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

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

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

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

也会做的工作。

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

为我工作