尝试使用javascript更改单元格填充

我正在尝试编写一个javascript函数，它将有效地下拉菜单，并使用css padding属性使其变大

以下是原始html（我想要的部分在navbar.php中）：

最后，javascript的代码是：

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

函数openPage（）{
var i；
对于（i=0；i而言，一个更好的选择是尝试以下方法：

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

函数openPage（）{
var i，el=document.getElementById（'headbar'）；
对于（i=0；iOkay，看起来不错。但是，你能使用jQuery吗？问题/问题是什么？@JamesMontagne它只是不工作，文件被上传了，但它只是不执行，所以我想它可能与我的代码有关。它不工作，因为填充是以像素为单位测量的，所以你必须这样写：document.getElementById（'headbar'）.style.paddingTop='100px'；我认为让这样的字符串变为可更改的唯一方法是取数字的子字符串，添加到数字中，然后再在末尾添加px，有没有一种不使用jQuery的更简单的方法？我也只会使用一次var声明：var i，el=document.getElementById（'headbar'））；然后参考循环中的变量：el.style.paddingTop=el.style.paddingTop+1；
#headbar {
width: 100%;
background-color: #999999;
padding: 35px 0 0 0;
text-align: center;
}

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

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