在Javascript中设置CSS属性?
我创build了以下…
var menu = document.createElement('select');
我将如何设置CSS属性,例如width: 100px
?
使用element.style
:
var element = document.createElement('select'); element.style.width = "100px";
只需设置style
:
var menu = document.createElement("select"); menu.style.width = "100px";
或者如果你喜欢,你可以使用jQuery :
$(menu).css("width", "100px");
对于大多数风格做这个:
var obj = document.createElement('select'); obj.style.width= "100px";
对于名称中带有连字符的样式,请改为:
var obj = document.createElement('select'); obj.style["-webkit-background-size"] = "100px"
这对于vanilla JavaScript来说确实很简单:
menu.style.width = "100px";
所有的答案告诉你如何做你的问题,但我会build议使用JavaScript来设置元素的类,并使用CSS的样式。 这样你就能保持行为和风格之间的正确分离。
想象一下,如果您有一位devise师重新devise网站的风格,那么他们应该可以纯粹的在CSS中工作,而无需使用JavaScript。
在原型,我会做:
$(newElement).addClassName('blah')
如果你想添加一个全局属性,你可以使用:
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'"/>
debugging时,我喜欢在一行中添加一堆css属性:
menu.style.cssText = 'width: 100px';
习惯了这种风格,你可以像这样在一行中添加一堆CSS:
menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
<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>
在反应,你可以这样做:
<h1 style={{width: '100px', float: 'left', marginRight: '10px', marginTop: '-17px'}}>Hello</h1> //note the double brackets
或将样式移动到样式对象,然后执行:
let styleObj = {width: '100px', float: 'left', marginRight: '10px', marginTop: '-17px'} <h1 style={styleObj}>Hello</h1> //no double brackets
camelCase哪里有一个css属性的连字符