在 JavaScript 中设置 CSS 属性？答案

【问题标题】：Set CSS property in JavaScript?在 JavaScript 中设置 CSS 属性？
【发布时间】：2011-07-08 21:27:33
【问题描述】：

我已经创建了以下...

var menu = document.createElement('select');

我现在如何设置 CSS 属性，例如 width: 100px？

【问题讨论】：

标签： javascript css

【解决方案1】：

只为那些想在 2018 年做同样事情的人

您可以将 CSS 自定义属性分配给您的元素（通过 CSS 或 JS）并进行更改：

通过 CSS 分配：

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

通过 JS 赋值

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

通过JS获取属性值

ELEMENT.style.getPropertyValue('--element-width');

这里有用的链接：

【讨论】：

【解决方案2】：

重要的是要理解下面的代码不会改变样式表，而是改变 DOM：

document.getElementById("p2").style.color = "blue";

DOM 存储样式表元素属性的计算值，当您使用 Javascript 动态更改元素样式时，您正在更改 DOM。需要注意和理解这一点很重要，因为您编写代码的方式会影响您的动态。如果您尝试获取未直接写入元素本身的值，像这样......

let elem = document.getElementById('some-element');
let propertyValue = elem.style['some-property'];

...您将返回一个未定义的值，该值将存储在代码示例的“propertyValue”变量中。如果您正在使用在 CSS 样式表中编写的获取和设置属性，并且您想要在这种情况下获取和设置样式属性值的 SINGLE FUNCTION，这是一个非常常见的情况，那么你必须使用 JQuery。

$(selector).css(property,value)

唯一的缺点是您必须了解 JQuery，但老实说，这是每个 Javascript 开发人员都应该学习 JQuery 的众多充分理由之一。如果你想获得一个从纯 JavaScript 中的样式表计算出来的 CSS 属性，那么你需要使用。

function getCssProp(){
  let ele = document.getElementById("test");
  let cssProp = window.getComputedStyle(ele,null).getPropertyValue("width");
}

此方法的缺点是 getComputedValue 方法只获取，不设置。 Mozilla's Take on Computed Values 这个链接更深入地介绍了我在此讨论的内容。希望这可以帮助某人！！！

【讨论】：

我认为您的第一个代码块缺少内容？
那里是固定的

【解决方案3】：

如果其中没有连字符，这适用于大多数 CSS 属性。

var element = document.createElement('select');
element.style.width = "100px";

对于像max-width 这样带有连字符的属性，您应该将sausage-case 转换为camelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";

【讨论】：

"sausage-case" 不错，但我更喜欢 "kebab-case" :)

【解决方案4】：

使用element.style:

var element = document.createElement('select');
element.style.width = "100px";

【讨论】：

像-webkit-background-size 这样的非官方的呢？有没有办法用纯 js 设置这些，还是我们必须使用 jQuery？
@Luke obj.style["-webkit-background-size"] = "400px"
这实际上是在元素中设置元素的样式，而不是在样式表中。

【解决方案5】：

对于大多数样式这样做：

var obj = document.createElement('select');
obj.style.width= "100px";

对于名称中包含连字符的样式，请改为：

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"

【讨论】：

【解决方案6】：

在调试的时候，我喜欢能够在一行中添加一堆css属性：

menu.style.cssText = 'width: 100px';

习惯了这种风格，你可以像这样在一行中添加一堆 css：

menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';

【讨论】：

【解决方案7】：

如果要添加全局属性，可以使用：

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);

【讨论】：

【解决方案8】：

<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'"/>

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

所有答案都正确地告诉你如何做你所问的，但我建议使用 JavaScript 在元素上设置一个类并使用 CSS 设置它的样式。这样，您就可以正确区分行为和风格。

想象一下，如果您让设计师重新设计网站的样式...他们应该能够完全使用 CSS 工作，而无需使用您的 JavaScript。

在原型中我会这样做：

$(newElement).addClassName('blah')

【讨论】：

+1 来自我 - 更容易/更清洁地将所有 CSS 分开。
jQuery 版本供参考...$(selector).addClass('blah')
原版：newElement.classList.add('blah')

【解决方案11】：

只需设置style:

var menu = document.createElement("select");
menu.style.width = "100px";

或者如果你喜欢，你可以使用jQuery:

$(menu).css("width", "100px");

【讨论】：

@Sime - 我的报价并不一致。我总是对 JS 使用双引号，因为这是工作的标准。无论如何，第一行有单引号，因为我从 OPs 问题中复制了它。反正现在更正了。
嗯，他们现在好了，但在我发表评论时它们不一致:)
@Sime - 我确实承认：“无论如何，第一行有单引号，因为我从 OPs 问题中复制了它。无论如何现在更正了。”

【解决方案12】：

使用原生 JavaScript 实际上非常简单：

menu.style.width = "100px";

【讨论】：