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

Question

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

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

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

我正在思考css('padding-top')然后解析它,只采用int部分,但值可以在"em"中,例如而不是在"px"中

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

它有点复杂,在代码中占用更多空间......

Answer 1

jQuery的主要优势之一是它是如此可插拔,所以如果你有一个库不能立即满足的需求,那么就有大量的插件需要搜索.如果没有一个能够满足您的需求,那么您自己就可以轻松实现.
我认为正确的方式去这里,如果你找不到一个能做你想做的插件,那就是最后一个:写自己的.

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

为了让您入门 - 这就是使用您自己的插件在您的代码中看起来像:

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