How can I set inline css styles for an element with javascript?

Question

I have a div I'm displaying a button image on. I'm displaying a sprite actually. I'd added an onlick attribute to the tag and it calls a function called ACFunction. I know how to set the style attribute with css properties using javascript but I need to set the style attribute with each one of these properties below except I will set them to have different values slightly and those values will allow for the image I want to be displayed when the button is clicked, to show up.

so right now, this is the current inline style for the button

style="width:74px; height:99px; background:url(images/icons.png) -0px -0px;"

Can I use:

 document.getElementById('id').style.

for each one of those properties? How would I set the background:url one?

$("#id").css({"width":"74px", "height":"99px","background":"url(images/icons.png) -0px -0px"}); — mplungjan
– mplungjan, Commented Oct 17, 2013 at 4:21
Or without jQuery: document.getElementById(id).style.cssText = 'width:74px; height:99px; background:url(images/icons.png) -0px -0px;'. — RobG
– RobG, Commented Oct 17, 2013 at 4:38

mplungjan · Accepted Answer · 2013-10-17 04:34:51Z

3

jQuery

$("#id").css({"width":"74px", "height":"99px",
              "background":"url(images/icons.png) -0px -0px"});

edited Oct 17, 2013 at 4:34

answered Oct 17, 2013 at 4:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Vinay Pratap Singh Bhadauria · Accepted Answer · 2013-10-17 04:23:06Z

3

yes you can use

document.getElementById('id').style.property = value;

also like this

    document.getElementById("demo").setAttribute(
   "style", "font-size: 100px; font-style: italic; color:#ff0000;");

even this

document.getElementById("myElement").style.cssText = cssString;

Css String

in jquery

$("#idname" or ".classname").css("property":"value");

answered Oct 17, 2013 at 4:23

Vinay Pratap Singh Bhadauria

9,9873 gold badges30 silver badges50 bronze badges

Comments

Rituraj ratan · Accepted Answer · 2013-10-17 04:21:09Z

0

in jquery

for single attribute setting

$("#idname").css("background":"desired setting");// for background setting

for multiple attribute

$("#idname").css({"width":"74px",
                  "height":"99px",
                   "background":"url(images/icons.png) -0px -0px"
                  });

reference css

answered Oct 17, 2013 at 4:21

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

Comments

D.S · Accepted Answer · 2013-10-17 04:24:52Z

0

Yes you can use document.getElementById('id').style.
use background attribute like background: url('');

answered Oct 17, 2013 at 4:24

D.S

1,1503 gold badges11 silver badges26 bronze badges

Comments

tilak · Accepted Answer · 2013-10-17 04:54:07Z

0

Try this :

* Define all styles with the classname "myStyles".

* $("#id").addClass("myStyles");

answered Oct 17, 2013 at 4:54

tilak

4,7216 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

How can I set inline css styles for an element with javascript?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related