jQuery 将 padding-top 计算为 px 中的整数答案

【问题标题】：jQuery calculate padding-top as integer in pxjQuery 将 padding-top 计算为 px 中的整数
【发布时间】：2011-03-17 18:41:33
【问题描述】：

我找到的唯一解决方案是($(this).innerHeight() - $(this).height()) / 2

但是 /2 不是正确的选项，因为用户可以有 padding-top:0px 和 padding-bottom:20px。

有没有办法使填充值更准确？

我在考虑 css('padding-top') 然后解析它，只取 int 部分，但值可以在“em”中而不是在“px”中

然后为每个值类型做 switch 语句？对于 em 一个，对于 px 另一个？

这有点复杂，而且在代码中占用更多空间......

【问题讨论】：

标签： jquery css padding

【解决方案1】：

jQuery 的主要优势之一是它的可插拔性，因此，如果您的需求不能立即被该库满足，那么可以搜索大量插件。如果没有人可以满足您的需求，那么您自己的滚动非常容易。
我认为正确的方法是，如果你找不到一个可以做你想做的插件，最后一个：编写你自己的。

但是，请确保您自己清楚插件的规格。如果元素没有用于填充的 css 设置，它应该返回什么？它应该返回此元素的样式还是计算的样式？无效的 css 会发生什么（比如 'padding-top: 10 unitsThatDontExist;' 或 'padding-left: two;'）？

致get you started - 这是使用您自己的插件在您的代码中的样子：

var topPadding = $('#anElement').padding('top');

要使其可用，只需编写一个像这样的插件：

$.fn.padding(direction) {
    // calculate the values you need, using a switch statement
    // or some other clever solution you figure out

    // this now contains a wrapped set with the element you apply the 
    // function on, and direction should be one of the four strings 'top', 
    // 'right', 'left' or 'bottom'

    // That means you could probably do something like (pseudo code):
    var intPart = this.css('padding-' + direction).getIntegerPart();
    var unit = this.css('padding-' + direction).getUnit();

    switch (unit)
    {
        case 'px':
            return intPart;
        case 'em':
            return ConvertEmToPx(intPart)
        default:
            // Do whatever you feel good about as default action
            // Just make sure you return a value on each code path
    }
};

【讨论】：

ParseInt(this.css("padding-"+direction)) 会将其转换为整数。
不，它没有。顺便说一句，“这个”应该被包裹起来。
@Psytronic，好的 - 很高兴知道！ =) 但是，我故意没有在这个插件中编写所有代码，以使 OP 不得不实际使用它进行一些操作，而不仅仅是复制粘贴。这是一种更好的学习方式；）
@Beck, this 不需要包装，因为插件方法中的函数上下文是匹配元素的包装集。
parseInt() 将转换为整数，ParseInt() 是不正确的调用

【解决方案2】：

据我所知，在请求 .css("padding-top") 时，jQuery 中使用了 getComputedSyle 和跨浏览器等效项，因此它们应该已经转换为像素。

另外一种计算padding的方法如下

$.fn.padding = function () {
    // clone the interesting element
    // append it to body so that CSS can take effect
    var clonedElement = this.
        clone().
        appendTo(document.body);

    // get its height
    var innerHeight = clonedElement.
        innerHeight();

    // set its padding top to 0
    clonedElement.css("padding-top","0");

    // get its new height
    var innerHeightWithoutTopPadding = clonedElement.
        innerHeight();

    // remove the clone from the body
    clonedElement.remove();

    // return the difference between the height with its padding and without its padding
    return innerHeight - innerHeightWithoutTopPadding;

};

// Test it

console.log($("div").padding()); // prints 19 in Chrome 23
console.log($("div").css("padding-top")); // prints 19.733333587646484px

位于：http://jsfiddle.net/oatkiller/9t9RJ/1/

【讨论】：