使用jQuery检测元素是否有填充

Question

如何检测元素是否应用了填充？

类似于：

if($('div.MiddleColumn') has padding of 5px) {
do something
}
else
{
do something else
}

Answer 1

这将返回元素的总水平填充：

var hz_padding = $("el").innerWidth() - $("el").width();

.innerWidth()返回与.width()相同的值，加上填充。因此hz_padding将是＆gt;如果$("el")有任何填充，则为0。

这里有趣的是你将拥有计算样式，这些样式可能与样式表中的样式不同。

有关.innerWidth()和.width()的详情。

如果要包含边框，请使用.outerWidth()，并使用.outerWidth(true)包含边距。

高度显然有相同的方法。

Answer 2

var hasPadding = false,
    element = $('div.MiddleColumn');

$.each(['top', 'right', 'bottom', 'left'], function(i, side) {
   if (parseInt(element.css('padding-' + side))) {
       hasPadding = true;
       return false;
   }
}

Answer 3

我会尝试以下方法：

if($('div.MiddleColumn').css('padding') == "5px") {

Answer 4

试试这个：

if($('div.MiddleColumn').css("padding") == "5px")
{
    /*
      do something
    */
}
else 
{
    /*
      do something else
    */
}

Answer 5

使用.css方法

if ( $('div.MiddleColumn').css('padding-left') === '5px' ) {
   do something
}
else {
   do something else
}