我已经创建了以下…
var menu = document.createElement('select');
我现在如何设置CSS属性,如宽度:100px?
我已经创建了以下…
var menu = document.createElement('select');
我现在如何设置CSS属性,如宽度:100px?
当前回答
这适用于大多数CSS属性,如果他们没有连字符。
var element = document.createElement('select');
element.style.width = "100px";
对于带有连字符的属性,如max-width,您应该将香肠大小写转换为骆驼大小写
var element = document.createElement('select');
element.style.maxWidth = "100px";
其他回答
所有的答案都正确地告诉你如何做你问的事情,但我建议使用JavaScript在元素上设置一个类,并使用CSS设置它的样式。这样你就能正确区分行为和风格。
想象一下,如果你有一个设计师重新设计网站的风格……他们应该能够完全在CSS工作,而不必与你的JavaScript工作。
在原型中我会这样做:
$(newElement).addClassName('blah')
使用element.style:
var element = document.createElement('select');
element.style.width = "100px";
这适用于大多数CSS属性,如果他们没有连字符。
var element = document.createElement('select');
element.style.width = "100px";
对于带有连字符的属性,如max-width,您应该将香肠大小写转换为骆驼大小写
var element = document.createElement('select');
element.style.maxWidth = "100px";
如果你想添加一个全局属性,你可以使用:
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
仅供在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