jQuery 将 padding-top 计算为 px 中的整数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3278997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery calculate padding-top as integer in px
提问by Somebody
The only solution i have found is ($(this).innerHeight() - $(this).height()) / 2
我找到的唯一解决方案是 ($(this).innerHeight() - $(this).height()) / 2
But / 2 is not right option, because user can have padding-top:0px and padding-bottom:20px.
但是 /2 不是正确的选项，因为用户可以有 padding-top:0px 和 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"
我在考虑css('padding-top')然后解析它，只取 int 部分，但值可以在“em”中，而不是在“px”中
Then make switch statement for each value type? For em one, for px another?
然后为每个值类型制作 switch 语句？对于 em 一个，对于 px 另一个？
It's all a bit complicated and takes more space in code...
这一切都有些复杂，并且在代码中占用了更多空间......
回答by Tomas Aschan
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.
jQuery 的主要优势之一是它的可插拔性，因此如果您有一个库不能立即满足的需求，则可以搜索大量插件。如果没有你想要的东西，那么推出你自己的东西真的很容易。
我认为去这里的正确方法是，如果你找不到一个可以做你想要的插件，那就是最后一个：编写自己的插件。
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;')?
但是，请确保您清楚自己的插件规格。如果元素没有用于填充的 css 设置，它应该返回什么？它应该返回此元素的样式，还是计算出的样式？无效的 css（比如“padding-top: 10 unitsThatDontExist;”或“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
}
};
回答by robert
As far as I know, getComputedSyle and cross browser equivalents are used in jQuery when requesting .css("padding-top") so they should have already been converted to pixels.
据我所知，在请求 .css("padding-top") 时，jQuery 中使用了 getComputedSyle 和跨浏览器等效项，因此它们应该已经转换为像素。
Another way to calculate the padding is as follows
另一种计算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
? Located at: http://jsfiddle.net/oatkiller/9t9RJ/1/
