CODEWITHSUNDEEP
javascriptcss
Skizit
Skizit

Reputation: 44842

Set CSS property in JavaScript?

I've created the following...

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

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

Upvotes: 242

Views: 472958

Answers (11)

Mattia Astorino
Mattia Astorino

Reputation: 1576

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:

Upvotes: 45

Daut
Daut

Reputation: 2625

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

Upvotes: 3

KJYe.Name
KJYe.Name

Reputation: 17169

Use element.style:

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

Upvotes: 337

Daniel X Moore
Daniel X Moore

Reputation: 15062

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"

Upvotes: 50

afable
afable

Reputation: 185

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

Upvotes: 12

Hetdev
Hetdev

Reputation: 1525

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

Upvotes: 7

Mohsin Khan
Mohsin Khan

Reputation: 131

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

Upvotes: 4

Mohsin Khan
Mohsin Khan

Reputation: 131

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

Upvotes: 2

Nick
Nick

Reputation: 2468

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

Upvotes: 18

djdd87
djdd87

Reputation: 68456

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

Upvotes: 74

Justin Niessner
Justin Niessner

Reputation: 245389

That's actually quite simple with vanilla JavaScript:

menu.style.width = "100px";

Upvotes: 20

Related Questions