使用JavaScript更改CSS时遇到问题

Question

我想更改标题上的填充，以便将其有效地降低到页面上。 我有以下代码可以运行并且不执行任何操作：

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

但是，在试图弄清为什么它无法在控制台中工作时，我发现也许是因为填充必须以像素为单位编写，因为以下方法可以有效并更改控制台中的填充：

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

有什么方法可以在没有Jquery的情况下执行此操作，而不必创建子字符串并重新协商呢？

Answer 1

很简单，只需执行以下操作：

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

Answer 2

尝试将px附加到变量

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