我已经创建了以下…
var menu = document.createElement('select');
我现在如何设置CSS属性,如宽度:100px?
我已经创建了以下…
var menu = document.createElement('select');
我现在如何设置CSS属性,如宽度:100px?
当前回答
只需设置样式:
var menu = document.createElement("select");
menu.style.width = "100px";
或者如果你喜欢,你可以使用jQuery:
$(menu).css("width", "100px");
其他回答
仅供在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
如果你想添加一个全局属性,你可以使用:
var styleEl = document.createElement('style'), styleSheet;
document.head.appendChild(styleEl);
styleSheet = styleEl.sheet;
styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
<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'"/>
当调试时,我喜欢能够在一行中添加一堆css属性:
menu.style.cssText = 'width: 100px';
习惯了这种风格,你可以在一行中添加一堆css,像这样:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
对于大多数样式,这样做:
var obj = document.createElement('select');
obj.style.width= "100px";
对于名称中有连字符的样式,这样做:
var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"