Question

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

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

有没有办法制作更准确的填充值？

我正在考虑css('padding-top')，然后通过仅使用int部分来解析它，但是值可以在“em”中，例如而不是在“px”中

然后为每个值类型创建switch语句？对于em one，对于px是另一个吗？

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

Answer 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
    }
};

Answer 2

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

计算填充的另一种方法如下

$.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/

jQuery在px中将padding-top计算为整数

2 个答案: