Set CSS property in JavaScript?

Question

I've created the following...

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

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

score 300 · Accepted Answer · edited Aug 24 '17 at 10:34

300

Use element.style:

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

edited Aug 24 '17 at 10:34

mikemaccana

94,893
84
350
433

answered Mar 04 '11 at 14:57

KJYe.Name

16,531
5
47
62

19

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 Jul 24 '13 at 00:41
71

@Luke obj.style["-webkit-background-size"] = "400px" – Daniel X Moore Oct 28 '13 at 23:23
This actually styles the element in the element and not in the stylesheet. – j D3V Jan 17 '20 at 14:23

score 64 · Answer 2 · answered Mar 04 '11 at 14:57

64

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");

answered Mar 04 '11 at 14:57

djdd87

65,256
25
153
194

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 Mar 04 '11 at 15:04
1

Well, they're OK now, but they were inconsistent at the time of my comment `:)` – Šime Vidas Mar 04 '11 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 Mar 04 '11 at 15:08

Daniel X Moore · Answer 3 · 2017-02-27T01:03:25.760

41

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"

edited Feb 27 '17 at 01:03

answered Oct 28 '13 at 23:25

Daniel X Moore

14,029
16
78
89

score 19 · Answer 4 · answered Mar 04 '11 at 14:57

19

That's actually quite simple with vanilla JavaScript:

menu.style.width = "100px";

answered Mar 04 '11 at 14:57

Justin Niessner

236,029
38
403
530

score 17 · Answer 5 · answered Mar 04 '11 at 15:05

17

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')

answered Mar 04 '11 at 15:05

Nick

2,348
15
20

1

+1 from me - much easier / cleaner to keep all your CSS separate. – Ian Oxley Mar 04 '11 at 15:29
1

jQuery version of this for reference... `$(selector).addClass('blah')` – zgr024 Jun 05 '13 at 04:14
Vanilla version: `newElement.classList.add('blah')` – rodorgas Jun 16 '21 at 13:04

Mattia Astorino · Answer 6 · 2020-06-04T07:33:36.107

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

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:

score 7 · Answer 7 · answered Nov 14 '16 at 02:24

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';

score 6 · Answer 8 · answered Aug 26 '15 at 17:36

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);

score 3 · Answer 9 · edited Jul 10 '15 at 13:09

3

<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'"/>

edited Jul 10 '15 at 13:09

Krzysztof Safjanowski

7,124
3
33
47

answered Jun 28 '13 at 21:26

Mohsin Khan

101
1
1
9

score 1 · Answer 10 · edited Jun 30 '13 at 17:14

1

<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>

edited Jun 30 '13 at 17:14

Robert Longson

110,343
23
240
227

answered Jun 28 '13 at 21:30

Mohsin Khan

101
1
1
9

score 1 · Answer 11 · answered Nov 27 '18 at 12:40

1

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";

answered Nov 27 '18 at 12:40

Daut

2,329
1
18
32

"sausage-case" is nice but I like "kebab-case" better :) – user9645 Dec 16 '21 at 15:42

Set CSS property in JavaScript?

11 Answers11

Linked

Related