在 Javascript 中增加 CSS padding-top 属性

我有一个 CSS 定义为div

#myDiv
{
  padding-top: 20px,
  padding-bottom: 30px
}

在 JS 函数中，我想增加padding-top by 10px

function DoStuff()
{
  var myDiv = document.getElementById('myDiv');
  //Increment by 10px. Which property to use and how? something like..
  //myDiv.style.paddingTop += 10px;
}

The .style属性只能读取inline元素上定义的样式。它无法读取样式表中定义的样式。

您需要一个库来获取值，或者使用类似的东西（来自这个问题 https://stackoverflow.com/questions/395341/get-element-stylesheet-style-in-javascript):

function getStyle(elem, name) {
    // J/S Pro Techniques p136
    if (elem.style[name]) {
        return elem.style[name];
    } else if (elem.currentStyle) {
        return elem.currentStyle[name];
    }
    else if (document.defaultView && document.defaultView.getComputedStyle) {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    } else {
        return null;
    }
}

那么你的代码就变成了：

var element = document.getElementById('myDiv'),
    padding = getStyle(element, 'paddingTop'); // eg "10px"

element.style.paddingTop = parseInt(padding, 10) + 10 + 'px';

参考：

• .style以及内联样式与样式表样式 http://www.quirksmode.org/dom/getstyles.html
• getStyle功能 https://stackoverflow.com/questions/395341/get-element-stylesheet-style-in-javascript
• 基数（第二个）参数为parseInt https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Functions/parseInt