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

假设你有这样的 HTML:

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

如果要修改这个 div 的 style 属性，可以使用

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

用所需的 style 属性替换 [ATTRIBUTE]。请记住删除“-”并将下面的字母大写。

例子

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

几乎是正确的。

因为 -是一个 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";

希望能帮上忙。

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

将会是

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

document.getElementById("xyz").setAttribute('style','padding-top: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);

希望能帮上忙

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');

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

我没问题

很惊讶我没有看到下面的 查询选择器查询选择器方法解决方案,

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

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