Add Multiple Styles with JavaScript

Question

I want to add multiple lines of CSS with JavaScript. I know I can do this:

document.getElementById(id).style.property=new style

as in:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

But, the above code allows me add just a single CSS Property. If a want to add more than one property, like this:

#id1 {
    color: red;
    background-color: beige;
    padding-bottom: 2px;
    margin: 3px;
}

How do I add all of this by not repeating:

document.getElementById(id).style.property=new style

....again and again. Thanks in advance !

Possible duplicate with Change an element's class with JavaScript it's the same principle, check it out — rmjoia
– rmjoia, Commented Mar 28, 2016 at 12:56
Please check this Link : stackoverflow.com/questions/3968593/…, hope it help :) — Sunil Gehlot
– Sunil Gehlot, Commented Mar 28, 2016 at 12:57

Gangula · Accepted Answer · 2023-04-11 20:02:11Z

21

document.getElementById("id1").setAttribute(
  "style", "color: green; background-color: beige; padding-bottom: 2px; margin: 3px;");

<body>
  <h1 id="id1">My Heading 1</h1>
  <button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>

Here is a fiddle.

edited Apr 11, 2023 at 20:02

Gangula

7,8005 gold badges54 silver badges95 bronze badges

answered Mar 28, 2016 at 12:57

Thomas Sebastian

1,6125 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

isherwood · Accepted Answer · 2020-01-14 19:31:36Z

6

Yes you can add multiple CSS with JavaScript like this

your button

<input id="myButton" type="button" value="Hello">

And the JavaScript for it

document.getElementById('myButton')
  .style.cssText = "color: blue; width: 100px; height: 55px; border: 1px solid red;";

edited Jan 14, 2020 at 19:31

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 28, 2016 at 12:59

Oposyma

1295 bronze badges

Comments

Drew Dahlman · Accepted Answer · 2016-03-28 12:56:56Z

4

Why not add a class that has all of the properties defined already?

document.getElementById(id).classList.add('new_class')

answered Mar 28, 2016 at 12:56

Drew Dahlman

4,9651 gold badge24 silver badges34 bronze badges

Comments

XCS · Accepted Answer · 2016-03-28 13:03:04Z

3

If your styles are dynamically generated and you can't simply add a new CSS class to this element, you could do something like this, using the same idea that you posted but coding in a DRY manner.

This is also useful if your element already has some styles applied and you don't want to overwrite them.

Click run code snippet below to see the demo.

var id  = "content";

var styles = { 
  'color': 'red',
  'background-color': 'beige',
  'padding-bottom': '2px',
  'margin': '3px'
};

var elementStyle = document.getElementById(id).style;
for(var styleName in styles) {
  elementStyle[styleName] = styles[styleName];
}

<div id="content">
  This is a test
</div>

edited Mar 28, 2016 at 13:03

answered Mar 28, 2016 at 12:57

XCS

28.3k28 gold badges105 silver badges155 bronze badges

Comments

isherwood · Accepted Answer · 2020-01-14 19:31:19Z

1

document.getElementById('the_object_ID')
  .setAttribute( 'style', 'color:white; margin:20px;');

edited Jan 14, 2020 at 19:31

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 28, 2016 at 12:58

Dilip Oganiya

1,56414 silver badges22 bronze badges

1 Comment

Wonko the Sane Over a year ago

You may want to add a little context around the answer. Also, what if style is already set on the object, and the code should extend that style with additional properties?

abshah · Accepted Answer · 2016-03-28 13:08:21Z

0

you can create a function for all this

<button type="button" onclick="myFunc('id1')"> Click Me! </button>

in js

function myFunc(id){
    var myDiv = document.getElementById(id);
    myDiv.style.color = 'red';
    myDiv.style.backgroundColor = "beige"; 
    myDiv.style.paddingBottom = "2px";
    myDiv.style.margin = "3px";
}

answered Mar 28, 2016 at 13:08

abshah

1

Comments

Boruto Uzumaki · Accepted Answer · 2021-01-30 10:35:51Z

0

Simplest answer is using .style like this :

document.getElementById("id1").style = "height:30px; width:30px; background-color:red;"

answered Jan 30, 2021 at 10:35

Boruto Uzumaki

8411 bronze badges

Collectives™ on Stack Overflow

Add Multiple Styles with JavaScript

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related