Changing element style attribute dynamically using JavaScript

Question

I hav a certain style sheet for a div  Now i want to modify one attribute of div dynamically using js   How can i do it   document getElementById  xyz   style padding-top    10px     Is this correct

User · Answer

I resolve similar problem with   document getElementById  xyz   style padding    10px 0 0 0     Hope that helps

User · Answer

Surprised that I did not see the below query selector way solution   document querySelector   xyz   style paddingTop    10px    CSSStyleDeclaration solutions  an example of the accepted answer  document getElementById  xyz   style paddingTop    10px

User · Answer

In addition to other answers  if you want to use the dash notition for style properties  you can also use   document getElementById  xyz   style  padding-top      10px

User · Answer

Assuming you have HTML like this    lt div id  thediv  gt  lt  div gt    If you want to modify the style attribute of this div  you d use   document getElementById  thediv   style  ATTRIBUTE      VALUE     Replace  ATTRIBUTE  with the style attribute you want  Remember to remove  -  and make the following letter uppercase    Examples  document getElementById  thediv   style display    none     changes the display document getElementById  thediv   style paddingLeft    none     removes padding

User · Answer

document getElementById  id   style    left  55   z-index  999  overflow  hidden  width  0px  height  0px  opacity  0  display  none      works for me

User · Answer

I would recommend using a function  which accepts the element id and an object containing the CSS properties  to handle this  This way you write multiple styles at once and use 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       Better still you could store the styles in a variable  which will make for much easier property management e g    var xyzStyles     padding-top   10px   setStyle  xyz   xyzStyles     Hope that helps

User · Answer

There is also 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

User · Answer

document getElementById  xyz   setAttribute  style   padding-top 10px      would also do the job

User · Answer

It s almost correct   Since the - is a javascript operator  you can t really have that in property names  If you were setting  border or something single-worded like that instead  your code would work just fine   However  the thing you need to remember for padding-top  and for any hyphenated attribute name  is that in javascript  you remove the hyphen  and make the next letter uppercase  so in your case that d be paddingTop   There are some other exceptions  JavaScript has some reserved words  so you can t set float like that  for instance  Instead  in some browsers you need to use cssFloat and in others styleFloat  It is for discrepancies like this that it is recommended that you use a framework such as jQuery  that handles browser incompatibilities for you

User · Answer

document getElementById  xyz   style padding-top    10px     will be  document getElementById  xyz   style  paddingTop      10px

User · Answer

I change css style in Javascript function  But Uncaught TypeError  bild is null   If I run it in a normal html file it work  CODE     var text   document getElementById  quot text quot    var bild   document getElementById  quot bild quot    var container   document getElementById  quot container quot     bild style  quot background-image quot      quot url  stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234 jpg   quot     bild style background-image    quot url  stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234 jpg   quot         bild style  quot background-image quot       quot url   quot     defaultpic    quot    quot    alert  bild style  quot background-image quot       bild style  quot background-size quot      quot 300px quot    bild style  quot background-repeat quot      quot no-repeat quot    bild style  quot background-position quot      quot center quot    bild style  quot border-radius quot      quot 50  quot    bild style  quot background-clip quot      quot border-box quot    bild style  quot transition quot      quot background-size 0 2s quot    bild style  quot transition-timing-function quot      quot cubic-bezier  07 1 41  82 1 41  quot    bild style  quot display quot      quot block quot    bild style  quot width quot      quot 100px quot    bild style  quot height quot      quot 100px quot     bild style  quot text-decoration quot      quot none quot    bild style  quot cursor quot      quot pointer quot    bild style  quot overflow quot      quot hidden quot    bild style  quot text-indent quot      quot 100  quot    bild style  quot white-space quot      quot nowrap quot     container style  quot position quot      quot relative quot    container style  quot font-family quot      quot Arial quot     text style  quot position quot      quot center quot    text style  quot bottom quot      quot 5px quot    text style  quot left quot      quot 1px quot    text style  quot color quot      quot white quot

[javascript] Changing element style attribute dynamically using JavaScript

Examples related to javascript

Examples related to html

Examples related to css