递增CSS填充-top属性在Javascript

Question

我有一个div

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

定义在JS功能的CSS，我想通过10px的

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

Answer 1

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

你需要一个库来获取值，或者使用类似（从this question）：

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 and inline vs stylesheet styles
• getStyle function
• radix (2nd) parameter to parseInt

Answer 2

递增的padding-top值你应该使用jquery来做这种事情，因为大多数其他解决方案不会跨浏览器兼容，你会花费数天的时间在你的头上。

function Dostuff() 
{ 
    var currentPadding = $('#myDiv').css('padding-top'); 
    $('#myDiv').css('padding-top', currentPadding + 1); 
} 

查看jquery.com了解更多信息。