Dynamically change an element's style attribute using JavaScript

Question

I have a stylesheet for a div. Now I want to change one div attribute dynamically using js.

How can i do this?

document.getElementById("xyz").style.padding-top = "10px"; 

Is it correct?

Answer 1

This is almost correct.

Since - is a javascript operator, you cannot really have this in property names. If you set border or something one-word like this, your code will work fine.

However, what you need to remember for padding-top and for any name of a portable attribute is that in javascript you remove the hyphen and make the next letter in upper case, so in your case it will be paddingTop .

There are other exceptions. JavaScript has a few reserved words, so you cannot set a float , like this. Instead, in some browsers you need to use cssFloat , and in other styleFloat . It is for such discrepancies that it is recommended to use a framework such as jQuery, which handles browser incompatibilities for you ...

Answer 2

In addition to the other answers, if you want to use dashes for style properties, you can also use:

 document.getElementById("xyz").style["padding-top"] = "10px"; 

Answer 3

I am solving a similar problem with:

 document.getElementById("xyz").style.padding = "10px 0 0 0"; 

Hope this helps.

Answer 4

Assuming you have some HTML like this:

 <div id='thediv'></div> 

If you want to change the style attribute of this div, you should use

 document.getElementById('thediv').style.[ATTRIBUTE] = '[VALUE]' 

Replace [ATTRIBUTE] desired style attribute. Remember to remove the “-” and make the next letter in upper case.

<strong> Examples

 document.getElementById('thediv').style.display = 'none'; //changes the display document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding 

Answer 5

 document.getElementById("xyz").style.padding-top = '10px'; 

will be

 document.getElementById("xyz").style["paddingTop"] = '10px'; 

Answer 6

I would recommend using a function that takes an element identifier and an object containing CSS properties to handle this. This way you write several styles at once and use the standard CSS property syntax.

 //function to handle multiple styles function setStyle(elId, propertyObject) { var el = document.getElementById(elId); for (var property in propertyObject) { el.style[property] = propertyObject[property]; } } setStyle('xyz', {'padding-top': '10px'}); 

It’s even better to save styles in a variable, which will simplify property management, for example.

 var xyzStyles = {'padding-top':'10px'} setStyle('xyz', xyzStyles); 

Hope that helps

Answer 7

 document.getElementById("xyz").setAttribute('style','padding-top:10px'); 

also do the job.

Answer 8

There is also a style.setProperty function:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

 document.getElementById("xyz").style.setProperty('padding-top', '10px'); // version with !important priority document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');