Add css via javascript

Question

Hy, its maybe a stupid question and tottaly easy, but I can't make it work so please help. Here's the code.

asp=height / width * 100;
document.getElementById("head_wrap").style["padding-top"] = "'+asp+%'";

using alert(asp); gives the correct value, but I made some mistake here "'+asp+%'", I want the value to be in percentages but as I said It doesn't work. thanks for your help!

The value is fine. The CSS property is wrong. It's paddingTop... — War10ck
– War10ck, Commented Sep 10, 2014 at 19:46

Felipe Oriani · Accepted Answer · 2014-09-10 19:58:27Z

4

You have some syntax errors in the set value with double quotes and single quotes. You also could use a property from style object, for sample:

asp = height / width * 100;
document.getElementById("head_wrap").style.paddingTop = asp + "%";

Alternativally, you could use as you did, but with some adjusts in your code.

asp = height / width * 100;
document.getElementById("head_wrap").style["padding-top"] = asp + "%;

I modified your jsfiddle, take a look here.

5 Comments

Tao Byebye Over a year ago

thanks but it still doesn't work the padding isn't added to the css of the element.here's the fiddle for better understanding what i want jsfiddle.net/hLp8g73n basically to mantain aspect ratio of backg. image and apply it to the parent div.

Felipe Oriani Over a year ago

This is the syntax provided by javascript, make sure your DOM is right ot accept it. You also could try using pixels px instead %.

Felix Kling Over a year ago

@TaoByebye: Your jsFiddle doesn't contain an element with ID head_wrap, so it can't work. Also, you are binding the window.onload handler after the the pages was already loaded, so it's not even triggered.

Tao Byebye Over a year ago

so what do you suggest instead to fix this window.onload problem

Felix Kling Over a year ago

@TaoByebye: Either remove window.onload = function() { .... }; or set up the jsFiddle to run the script after the DOM is ready (you know, left hand column, no wrap - in <body>

Collectives™ on Stack Overflow

Add css via javascript

1 Answer 1

See Also

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

See Also

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related