Question

我创建了以下内容......

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

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

Answer 1

使用element.style：

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

Answer 2

只需设置style：

即可

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

或者如果您愿意，可以使用jQuery：

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

Answer 3

对于大多数样式，请执行以下操作：

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

对于名称中带有连字符的样式，请执行以下操作：

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

Answer 4

使用vanilla JavaScript实际上非常简单：

menu.style.width = "100px";

Answer 5

所有的答案都告诉你如何做你所要求的但我会建议使用JavaScript在元素上设置一个类并使用CSS来设置它。这样你就可以保持行为和风格之间的正确分离。

想象一下，如果你有一个设计师来重新设计网站风格......他们应该能够纯粹使用CSS而不必使用你的JavaScript。

在原型中，我会这样做：

$(newElement).addClassName('blah')

Answer 6

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

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

Answer 7

调试时，我希望能够在一行中添加一堆css属性：

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

习惯这种风格你可以在一行中添加一堆css，如下所示：

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

Answer 8

仅适用于想要在2018年做同样事情的人

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

通过CSS进行分类：

element {
  --element-width: 300px;

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

通过JS分配

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

通过JS获取属性值

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

有用的链接：

Answer 9

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

Answer 10

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

Answer 11

如果大多数CSS属性中都没有连字符，那么此方法就很好用。

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

对于其中带有连字符的属性，例如max-width，应将sausage-case转换为camelCase

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

Answer 12

很重要的一点是，下面的代码不会更改样式表，而是会更改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 此链接将更深入地介绍我在这里所解决的内容。希望这可以帮助到人！

在Javascript中设置CSS属性？

12 个答案: