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中使用{{1}}。对于这样的差异，建议您使用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

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

将是

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

Answer 6

还有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 7

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

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

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

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

也会做这个工作。

Answer 10

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

适合我

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

10 个答案: