jQuery以px为整数计算padding-top

问题描述

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

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

一个更精确的填充值的方法？

我在考虑 css（'padding-top'）然后解析它，通过只取int部分，但值可以在em例如而不是px

然后为每个值类型做switch语句？

这是一个有点复杂，需要更多的代码空间...

我认为正确的方式去这里，如果你找不到一个插件，你想要的是，最后一个：写自己的。

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

//docs.jquery.com/Plugins/Authoringrel =nofollow noreferrer>让你开始 - 这是你自己的插件在你的代码中的样子：

  var topPadding = $（'＃anElement'）。padding（'top'）; 
  

要使其可用，只需编写如下插件：

  $。fn.padding（direction）{
 //使用switch语句
 //或其他一些聪明的方法计算所需的值解决方案你找出
 
 //现在包含一个包含你应用
 //函数的元素的包集，方向应该是四个字符串'top'之一，
 //'right'，'left'or'bottom'
 
 //这意味着你可以做一些类似的操作（伪代码）：
 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）
默认值：
 //做任何你感觉良好的默认操作
 //只是确保你返回每个代码路径上的值
} 
}; 
  

The only solution i have found is ($(this).innerHeight() - $(this).height()) / 2

But / 2 is not right option, because user can have padding-top:0px and padding-bottom:20px.

Is there a way to make more accurate padding values?

I was thinking about css('padding-top') and then parse it, by taking only int part, but value can be in "em" for example and not in "px"

Then make switch statement for each value type? For em one, for px another?

It's all a bit complicated and takes more space in code...

解决方案

One of the main strengths of jQuery is that it is so pluggable, so if you have a need that is not immediately satisfied by the library, there's a vast landscape of plugins to search. And if there is none that does what you want, it's really easy to roll your own.
I think the right way to go here, if you can't find a plugin that does what you want, is the last one: to write your own.

However, make sure that you are clear with yourself on the specs of your plugin. What should it return if the element has no css setting for padding? Should it return the styling on this element, or the computed style? What happens for invalid css (say 'padding-top: 10 unitsThatDontExist;' or 'padding-left: two;')?

To get you started - this is what using your own plugin could look like in your code:

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

To make that available, just write a plugin like this:

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

这篇关于jQuery以px为整数计算padding-top的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！