9

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 !

IceWreck
  • 117
  • 1
  • 2
  • 10
  • Possible duplicate with [Change an element's class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript) it's the same principle, check it out – rmjoia Mar 28 '16 at 12:56
  • Please check this Link : http://stackoverflow.com/questions/3968593/how-to-set-multiple-css-style-properties-in-javascript, hope it help :) – Sunil Gehlot Mar 28 '16 at 12:57

7 Answers7

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.

Gangula
  • 5,193
  • 4
  • 30
  • 59
Thomas Sebastian
  • 1,582
  • 5
  • 18
  • 38
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;";
isherwood
  • 58,414
  • 16
  • 114
  • 157
Oposyma
  • 129
  • 5
4

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

document.getElementById(id).classList.add('new_class')
Drew Dahlman
  • 4,952
  • 1
  • 22
  • 34
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>
XCS
  • 27,244
  • 26
  • 101
  • 151
1
document.getElementById('the_object_ID')
  .setAttribute( 'style', 'color:white; margin:20px;');
isherwood
  • 58,414
  • 16
  • 114
  • 157
Dilip Oganiya
  • 1,504
  • 12
  • 20
  • 4
    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? – Wonko the Sane Jan 14 '20 at 21:28
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";
}
abshah
  • 1
0

Simplest answer is using .style like this :

document.getElementById("id1").style = "height:30px; width:30px; background-color:red;"
Boruto Uzumaki
  • 74
  • 10