242

I've created the following...

var menu = document.createElement('select');

How would I now set CSS attributes e.g width: 100px?

11 Answers 11

336

Use element.style:

var element = document.createElement('select');
element.style.width = "100px";
3
  • 23
    What about for the unofficial ones like -webkit-background-size? Is there a way to set these with plain js or do we have to use jQuery?
    – Luke
    Commented Jul 24, 2013 at 0:41
  • 77
    @Luke obj.style["-webkit-background-size"] = "400px" Commented Oct 28, 2013 at 23:23
  • This actually styles the element in the element and not in the stylesheet.
    – SHINIGAMI
    Commented Jan 17, 2020 at 14:23
73

Just set the style:

var menu = document.createElement("select");
menu.style.width = "100px";

Or if you like, you can use jQuery:

$(menu).css("width", "100px");
3
  • 5
    @Sime - My quotes aren't inconsistent. I always use double quotes for JS as that's the standard at work. Anyway, the first line had single quotes as I copied it from the OPs question. Corrected now anyway.
    – djdd87
    Commented Mar 4, 2011 at 15:04
  • 1
    Well, they're OK now, but they were inconsistent at the time of my comment :) Commented Mar 4, 2011 at 15:07
  • 2
    @Sime - I did acknoledge that: "Anyway, the first line had single quotes as I copied it from the OPs question. Corrected now anyway."
    – djdd87
    Commented Mar 4, 2011 at 15:08
50

For most styles do this:

var obj = document.createElement('select');
obj.style.width= "100px";

For styles that have hyphens in the name do this instead:

var obj = document.createElement('select');
obj.style["-webkit-background-size"] = "100px"
42

Just for people who want to do the same thing in 2023

You can assign a CSS custom property to your element (through CSS or JS) and change it:

Assigment through CSS:

element {
  --element-width: 300px;

  width: var(--element-width, 100%);
}

Assignment through JS

ELEMENT.style.setProperty('--element-width', NEW_VALUE);

Get property value through JS

ELEMENT.style.getPropertyValue('--element-width');

Here useful links:

20

That's actually quite simple with vanilla JavaScript:

menu.style.width = "100px";
18

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.

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.

In prototype I would do:

$(newElement).addClassName('blah')
3
  • 1
    +1 from me - much easier / cleaner to keep all your CSS separate.
    – Ian Oxley
    Commented Mar 4, 2011 at 15:29
  • 1
    jQuery version of this for reference... $(selector).addClass('blah')
    – zgr024
    Commented Jun 5, 2013 at 4:14
  • Vanilla version: newElement.classList.add('blah')
    – rodorgas
    Commented Jun 16, 2021 at 13:04
12

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

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

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

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

if you want to add a global property, you can use:

    var styleEl = document.createElement('style'), styleSheet;
            document.head.appendChild(styleEl);
            styleSheet = styleEl.sheet;
            styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
4
<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'"/>
3

This works well with most CSS properties if there are no hyphens in them.

var element = document.createElement('select');
element.style.width = "100px";

For properties with hyphens in them like max-width, you should convert the sausage-case to camelCase

var element = document.createElement('select');
element.style.maxWidth = "100px";
1
  • 1
    "sausage-case" is nice but I like "kebab-case" better :)
    – user9645
    Commented Dec 16, 2021 at 15:42
2
<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>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.