在JavaScript中设置CSS属性？

161

我创建了以下内容...

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

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

javascript css

— 斯基齐特
source

252

用途element.style：

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

— KJYe.Name叶家仁
source

14

对于那些非官方的人-webkit-background-size呢？有没有一种方法可以使用普通js来设置它们，还是必须使用jQuery？

— 路加福音

60

@Luke obj.style [“-webkit-background-size”] =“ 400px”

— Daniel X Moore

这实际上是在元素中而不是在样式表中设置元素的样式。

— Aft3rL1f3

56

只需设置style：

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

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

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

— dd
source

5

@Sime-我的报价并不矛盾。我总是对JS使用双引号，因为这是工作的标准。无论如何，在我从操作题中复制第一行时，第一行有单引号。现在已更正。

— djdd87 2011年

1

那么，他们现在好了，但他们在我的评论的时间不一致:)

— 森那维达斯

2

@Sime-我确实承认：“无论如何，当我从OPs问题中复制第一行时，第一行

— djdd87 2011年

35

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

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

对于名称中带有连字符的样式，请改用以下方法：

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

— 丹尼尔X摩尔
source

17

使用原始JavaScript实际上很简单：

menu.style.width = "100px";

— 贾斯汀·尼斯纳（Justin Niessner）
source

14

所有的答案都能正确地告诉您如何执行您所要求的操作，但是我建议您使用JavaScript在元素上设置类并使用CSS设置其样式。这样，您就可以在行为和样式之间保持正确的分隔。

想象一下，如果您有一位设计师来重新设计网站的样式……他们应该可以完全在CSS中工作，而无需使用JavaScript。

在原型中，我会做：

$(newElement).addClassName('blah')

— 缺口
source

1

从我这里+1-更容易/更清洁，将所有CSS分开。

— 伊恩·奥克斯利

1

jQuery版本供参考...$(selector).addClass('blah')

— zgr024 2013年

8

只适合想要在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');

这里有用的链接：

— 马蒂亚·阿斯托里诺（Mattia Astorino）
source

6

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

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

习惯了这种样式后，您可以在一行中添加一堆CSS，如下所示：

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

— 亲切的
source

5

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

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

— 海特杰夫
source

3

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

— 莫辛汗
source

1

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

— 莫辛汗
source

1

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

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

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

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

— 达特
source

0

重要的是要了解，下面的代码不会更改样式表，而是会更改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对计算值的理解关于我在这里所解决的问题，此链接更加深入。希望这可以帮助到人！

— Aft3rL1f3
source

我认为您的第一个代码块缺少内容？

— zb226

1

固定在那里

— Aft3rL1f3