Trouble changing css with javascript

Question

I want to change the padding on my header so that it effectively is lowered onto the page. I have the following code which runs and does nothing:

function openPage() {
    var i, el = document.getElementById('headbar');
    for(i=0;i<30;i++) {
        el.style.paddingTop = el.style.paddingTop + 1;
    }
}

However, while trying to figure out why it wasn't working in the console I figured out that maybe it is because the padding must be written in pixels because the following works and changes the padding in the console:

document.getElementById('headbar').style.paddingTop='100px';

is there any way I could do this without Jquery and without having to make a substring and reconcatonating?

you can write you're own value normalization, but besides that you have to concat the string. all tough thats not the end of the world really — Willem D'Haeseleer
– Willem D'Haeseleer, Commented Jun 3, 2013 at 22:01

Sushanth -- · Accepted Answer · 2013-06-03 23:13:27Z

2

Try appending px to the variable

 var fontSize = parseInt(el.style.paddingTop, 10);
 el.style.paddingTop = ( (!isNaN(fontSize) : fontSize : 0) + 1) + 'px';

edited Jun 3, 2013 at 23:13

answered Jun 3, 2013 at 22:01

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

Chris Lang Over a year ago

This should work from what I understand but it does nothing in the end. hmmm.

Gabe · Accepted Answer · 2013-06-03 22:00:32Z

2

Pretty simple just do this:

for(i=0;i<30;i++) {
     var px = (el.style.paddingTop + 1) + "px";
     el.style.paddingTop = px;
}

answered Jun 3, 2013 at 22:00

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

1 Comment

Chris Lang Over a year ago

i see what you are doing here but el.style.paddingTop must return null because the padding is set to 1px

Collectives™ on Stack Overflow

Trouble changing css with javascript

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related