在 Javascript 中设置 CSS 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5195303/
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
Set CSS property in Javascript?
提问by Skizit
I've created the following...
我创建了以下...
var menu = document.createElement('select');
How would I now set CSS attributes e.g width: 100px?
我现在将如何设置 CSS 属性，例如width: 100px？
回答by u476945
Use element.style:
var element = document.createElement('select');
element.style.width = "100px";
回答by djdd87
回答by Daniel X Moore
For most styles do this:
对于大多数样式，请执行以下操作：
var obj = document.createElement('select');
obj.style.width= "100px";
For styles that have hyphens in the name do this instead:
对于名称中包含连字符的样式，请改为执行以下操作：
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"
回答by Justin Niessner
That's actually quite simple with vanilla JavaScript:
使用 vanilla JavaScript 这实际上非常简单：
menu.style.width = "100px";
回答by Nick
All of the answers tell you correctly how to do what you asked but I would advise using JavaScript to set a class on the element and style it by using CSS. That way you are keeping the correct separation between behaviour and style.
所有答案都正确地告诉您如何执行您所要求的操作，但我建议使用 JavaScript 在元素上设置一个类并使用 CSS 为其设置样式。这样你就可以在行为和风格之间保持正确的分离。
Imagine if you got a designer in to re-style the site... they should be able to work purely in CSS without having to work with your JavaScript.
想象一下，如果您让一位设计师重新设计网站的样式……他们应该能够完全使用 CSS 工作，而无需使用您的 JavaScript。
In prototype I would do:
在原型中，我会这样做：
$(newElement).addClassName('blah')
回答by afable
When debugging, I like to be able to add a bunch of css attributes in one line:
调试时，我喜欢能够在一行中添加一堆css属性：
menu.style.cssText = 'width: 100px';
Getting used to this style you can add a bunch of css in one line like so:
习惯这种风格后，您可以在一行中添加一堆 css，如下所示：
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
回答by Mattia Astorino
Just for people who want to doing the same thing in 2018
只为那些想在 2018 年做同样事情的人
You can assign a CSS custom property to your element (through CSS or JS) and change it:
您可以为您的元素分配一个 CSS 自定义属性（通过 CSS 或 JS）并更改它：
Assigment through CSS:
通过 CSS 赋值：
element {
--element-width: 300px;
width: var(--element-width, 100%);
}
Assignment through JS
通过 JS 赋值
ELEMENT.style.setProperty('--element-width', NEW_VALUE);
Get property value through JS
通过JS获取属性值
ELEMENT.style.getPropertyValue('--element-width');
Here useful links:
这里有用的链接：
- https://developer.mozilla.org/en-US/docs/Web/CSS/--*
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty
- https://developer.mozilla.org/en-US/docs/Web/CSS/--*
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/getPropertyValue
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
- https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/removeProperty
回答by Hetdev
if you want to add a global property, you can use:
如果要添加全局属性，可以使用：
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
回答by Mohsin Khan
<h1>Silence and Smile</h1>
<input type="button" value="Show Red" onclick="document.getElementById('h1').style.color='Red'"/>
<input type="button" value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/>
回答by Mohsin Khan
<body>
<h1 id="h1">Silence and Smile</h1><br />
<h3 id="h3">Silence and Smile</h3>
<script type="text/javascript">
document.getElementById("h1").style.color = "Red";
document.getElementById("h1").style.background = "Green";
document.getElementById("h3").style.fontSize = "larger" ;
document.getElementById("h3").style.fontFamily = "Arial";
</script>
</body>
