使用 JavaScript 动态更改元素样式属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5191478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing element style attribute dynamically using JavaScript
提问by jslearner
I hav a certain style sheet for a div. Now i want to modify one attribute of div dynamically using js.
我有一个特定的 div 样式表。现在我想使用js动态修改div的一个属性。
How can i do it?
我该怎么做？
document.getElementById("xyz").style.padding-top = "10px";
Is this correct?
这样对吗？
回答by KooiInc
In addition to other answers, if you want to use the dash notition for style properties, you can also use:
除了其他答案之外，如果您想对样式属性使用破折号，您还可以使用：
document.getElementById("xyz").style["padding-top"] = "10px";
回答by dxh
It's almost correct.
这几乎是正确的。
Since the -is a javascript operator, you can't really have that in property names. If you were setting, borderor something single-worded like that instead, your code would work just fine.
由于-是 javascript 运算符，因此您不能在属性名称中使用它。如果你正在设置，border或者类似的单字，你的代码会工作得很好。
However, the thing you need to remember for padding-top, and for any hyphenated attribute name, is that in javascript, you remove the hyphen, and make the next letter uppercase, so in your case that'd be paddingTop.
但是，对于padding-top以及任何带连字符的属性名称，您需要记住的是，在 javascript 中，您删除了连字符，并将下一个字母设为大写，因此在您的情况下就是paddingTop.
There are some other exceptions. JavaScript has some reserved words, so you can't set floatlike that, for instance. Instead, in some browsers you need to use cssFloatand in others styleFloat. It is for discrepancies like this that it is recommended that you use a framework such as jQuery, that handles browser incompatibilities for you...
还有一些其他的例外。JavaScript 有一些保留字，所以你不能这样设置float，例如。相反，在某些浏览器中您需要使用cssFloat而在其他浏览器中styleFloat。正是对于这样的差异，建议您使用诸如 jQuery 之类的框架来为您处理浏览器不兼容问题...
回答by chairul
I resolve similar problem with:
我解决了类似的问题：
document.getElementById("xyz").style.padding = "10px 0 0 0";
Hope that helps.
希望有帮助。
回答by JohnP
Assuming you have HTML like this:
假设你有这样的 HTML：
<div id='thediv'></div>
If you want to modify the style attribute of this div, you'd use
如果你想修改这个 div 的 style 属性，你会使用
document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]'
Replace [ATTRIBUTE]with the style attribute you want. Remember to remove '-' and make the following letter uppercase.
替换[ATTRIBUTE]为您想要的样式属性。请记住删除“-”并使以下字母大写。
Examples
例子
document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding
回答by icl7126
There is also style.setPropertyfunction:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
还有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');
回答by T.Todua
document.getElementById("xyz").style.padding-top = '10px';
will be
将会
document.getElementById("xyz").style["paddingTop"] = '10px';
回答by rjbultitude
I would recommend using a function, which accepts the element id and an object containing the CSS properties, to handle this. This way you write multiple styles at once and use standard CSS property syntax.
我建议使用一个函数来处理这个问题，它接受元素 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'});
Better still you could store the styles in a variable, which will make for much easier property management e.g.
更好的是，您可以将样式存储在变量中，这将使属性管理变得更加容易，例如
var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);
Hope that helps
希望有帮助
回答by Rama
Surprisedthat I did not see the below query selectorway solution,
很惊讶我没有看到下面的查询选择器方式解决方案，
document.querySelector('#xyz').style.paddingTop = "10px"
CSSStyleDeclarationsolutions, an example of the accepted answer
CSSStyleDeclaration解决方案，已接受答案的示例
document.getElementById('xyz').style.paddingTop = "10px";
回答by Hyperion
document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';
works for me
为我工作
回答by Pinkesh Badjatiya
document.getElementById("xyz").setAttribute('style','padding-top:10px');
would also do the job.
也会做这份工作。
