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

Question

我有一个div的某个样式表.现在我想用js动态修改div的一个属性.

我该怎么做？

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

它是否正确？

Answer 1

除了其他答案之外,如果要将破折号标记用于样式属性,还可以使用:

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

Answer 2

这几乎是正确的.

由于它-是一个javascript运算符,你不能在属性名称中真正拥有它.如果你正在设置,border或者像这样的措辞,你的代码就可以正常工作了.

但是,你需要记住的事情padding-top,以及任何带连字符的属性名称,是在javascript中,你删除连字符,并使下一个字母大写,所以在你的情况下,这是paddingTop.

还有一些例外.JavaScript有一些保留字,所以你不能float像那样设置.相反,在某些浏览器中,您需要使用cssFloat和其他浏览器styleFloat.对于这样的差异,建议您使用jQuery这样的框架来处理浏览器不兼容问题...

Answer 3

我解决类似的问题:

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

希望有所帮助.

Answer 4

假设您有这样的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

Answer 5

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

Answer 6

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

将会

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

Answer 7

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

也会做这份工作。

Answer 8

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

希望能有所帮助

Answer 9

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

为我工作

Answer 10

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

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

CSSStyleDeclaration解决方案,接受答案的一个例子

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