在Javascript中设置CSS属性？

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

只为那些想在 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');

这里有用的链接：

• 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

Answer 7

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

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

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

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

Answer 8

如果要添加全局属性,可以使用:

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