blocks|key|763821|text|使用element.style|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|763822|var+element+=+document.createElement('select');
element.style.width+=+"100px";|code-block|syntax|javascript|763823|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style^0|2|D|2|D|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@$9|V|A|W|1|X]]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style" rel="noreferrer"><code>element.style</code></a>:</p>

<pre><code>var element = document.createElement('select');
element.style.width = "100px";
</code></pre>


blocks|key|979295|text|只需设置style|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|979296|var+menu+=+document.createElement("select");
menu.style.width+=+"100px";|code-block|syntax|javascript|979297|或者，如果您愿意，也可以使用jQuery|979298|$(menu).css("width",+"100px");|979299|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/css/^0|4|5|0|0|E|6|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>Just set the <code>style</code>:</p>

<pre><code>var menu = document.createElement("select");
menu.style.width = "100px";
</code></pre>

<p>Or if you like, you can use <a href="http://api.jquery.com/css/" rel="noreferrer">jQuery</a>:</p>

<pre><code>$(menu).css("width", "100px");
</code></pre>


blocks|key|979364|text|对于大多数样式，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|979365|var+obj+=+document.createElement('select');
obj.style.width=+"100px";|code-block|syntax|javascript|979366|对于名称中包含连字符的样式，请执行以下操作：|979367|var+obj+=+document.createElement('select');
obj.style["-webkit-background-size"]+=+"100px"|979368|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>For most styles do this:</p>

<pre><code>var obj = document.createElement('select');
obj.style.width= "100px";
</code></pre>

<p>For styles that have hyphens in the name do this instead:</p>

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


blocks|key|979276|text|对于普通的JavaScript来说，这实际上非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|979277|menu.style.width+=+"100px";|code-block|syntax|javascript|979278|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>That's actually quite simple with vanilla JavaScript:</p>

<pre><code>menu.style.width = "100px";
</code></pre>


blocks|key|979316|text|所有的答案都正确地告诉你如何做你所要求的，但我建议使用JavaScript在元素上设置一个类，并使用CSS设置它的样式。这样你就保持了行为和风格之间的正确分离。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|979317|想象一下，如果你请了一个设计师来重新设计这个网站……它们应该能够完全在CSS中工作，而不必使用您的JavaScript。|979318|在prototype中，我会这样做：|979319|$(newElement).addClassName('blah')|code-block|syntax|javascript|979320|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>All of the answers tell you correctly how to do what you asked but I would advise using JavaScript to set a class on the element and style it by using CSS.  That way you are keeping the correct separation between behaviour and style.  </p>

<p>Imagine if you got a designer in to re-style the site... they should be able to work purely in CSS without having to work with your JavaScript.</p>

<p>In prototype I would do:</p>

<pre><code>$(newElement).addClassName('blah')
</code></pre>


blocks|key|979471|text|在调试时，我希望能够在一行中添加一组css属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|979472|menu.style.cssText+=+'width:+100px';|code-block|syntax|javascript|979473|要习惯这种风格，您可以在一行中添加一堆css，如下所示：|979474|menu.style.cssText+=+'width:+100px;+height:+100px;+background:+#afafaf';|979475|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>When debugging, I like to be able to add a bunch of css attributes in one line:</p>

<pre><code>menu.style.cssText = 'width: 100px';
</code></pre>

<p>Getting used to this style you can add a bunch of css in one line like so:</p>

<pre><code>menu.style.cssText = 'width: 100px; height: 100px; background: #afafaf';
</code></pre>


blocks|key|763976|text|如果要添加全局属性，可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|763977|++++var+styleEl+=+document.createElement('style'),+styleSheet;
++++++++++++document.head.appendChild(styleEl);
++++++++++++styleSheet+=+styleEl.sheet;
++++++++++++styleSheet.insertRule(".modal+{+position:absolute;+bottom:auto;+}",+0);|code-block|syntax|javascript|763978|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>if you want to add a global property, you can use:</p>

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


blocks|key|979322|text|<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'"/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|979323|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;h1&gt;Silence and Smile&lt;/h1&gt;
&lt;input  type="button"  value="Show Red"   onclick="document.getElementById('h1').style.color='Red'"/&gt;
&lt;input  type="button"  value="Show Green" onclick="document.getElementById('h1').style.color='Green'"/&gt;
</code></pre>


blocks|key|979327|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|979328|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;body&gt;
  &lt;h1 id="h1"&gt;Silence and Smile&lt;/h1&gt;&lt;br /&gt;
  &lt;h3 id="h3"&gt;Silence and Smile&lt;/h3&gt;

  &lt;script type="text/javascript"&gt;
    document.getElementById("h1").style.color = "Red";
    document.getElementById("h1").style.background = "Green";
    document.getElementById("h3").style.fontSize = "larger" ; 
    document.getElementById("h3").style.fontFamily = "Arial";
  &lt;/script&gt;
&lt;/body&gt;
</code></pre>


blocks|key|979532|text|如果大多数CSS属性中没有连字符，则可以很好地使用这些属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|979533|var+element+=+document.createElement('select');
element.style.width+=+"100px";|code-block|syntax|javascript|979534|对于带有连字符的属性(如max-width+)，应将sausage-case转换为camelCase|offset|length|style|CODE|979535|var+element+=+document.createElement('select');
element.style.maxWidth+=+"100px";|979536|entityMap^0|0|0|C|9|Q|C|15|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]|$I|V|J|W|K|L]|$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

<p>This works well with most CSS properties if there are no hyphens in them.</p>

<pre><code>var element = document.createElement('select');
element.style.width = "100px";
</code></pre>

<p>For properties with hyphens in them like <code>max-width</code>, you should convert the <code>sausage-case</code> to <code>camelCase</code></p>

<pre><code>var element = document.createElement('select');
element.style.maxWidth = "100px";
</code></pre>


<p>I've created the following...</p>

<pre><code>var menu = document.createElement('select');
</code></pre>

<p>How would I now set CSS attributes e.g <code>width: 100px</code>?</p>


Set CSS property in JavaScript?

我创建了以下代码...var menu = document.createElement('select');我现在如何设置CSS属性，例如width: 100px

问是否在JavaScript中设置CSS属性？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在JavaScript中设置CSS属性？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否在JavaScript中设置CSS属性？
EN