jQuery有height() en width()函数,返回高度或宽度像素为整数…
我怎么能得到一个填充或边缘值的元素像素和整数使用jQuery?
我的第一个想法是:
var padding = parseInt(jQuery("myId").css("padding-top"));
但是,如果填充以ems为例,我如何才能得到以像素为单位的值?
查看由Chris Pebble建议的JSizes插件,我意识到我自己的版本是正确的:)。jQuery总是以像素为单位返回值,因此只需将其解析为整数就是解决方案。
感谢Chris Pebble和Ian Robinson
你应该能够使用CSS (http://docs.jquery.com/CSS/css#name)。你可能需要更具体一些,比如"padding-left"或"margin-top"。
例子:
CSS
a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}
JS
$("a").css("margin-top");
结果是10px。
如果您想获取整数值,可以执行以下操作:
parseInt($("a").css("margin-top"))
你可以像使用任何CSS属性一样抓取它们:
alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));
你可以用css方法中的第二个属性来设置它们:
$("#mybox").css("padding-right", "20px");
编辑:如果你只需要像素值,使用parseInt(val, 10):
parseInt($("#mybox").css("padding-right", "20px"), 10);
不是死灵,但我做了这个,可以确定基于各种值的像素:
$.fn.extend({
pixels: function (property, base) {
var value = $(this).css(property);
var original = value;
var outer = property.indexOf('left') != -1 || property.indexOf('right') != -1
? $(this).parent().outerWidth()
: $(this).parent().outerHeight();
// EM Conversion Factor
base = base || 16;
if (value == 'auto' || value == 'inherit')
return outer || 0;
value = value.replace('rem', '');
value = value.replace('em', '');
if (value !== original) {
value = parseFloat(value);
return value ? base * value : 0;
}
value = value.replace('pt', '');
if (value !== original) {
value = parseFloat(value);
return value ? value * 1.333333 : 0; // 1pt = 1.333px
}
value = value.replace('%', '');
if (value !== original) {
value = parseFloat(value);
return value ? (outer * value / 100) : 0;
}
value = value.replace('px', '');
return parseFloat(value) || 0;
}
});
这样,我们会考虑到大小和自动/继承。
请不要仅仅为了做一些本地已经可用的东西而去加载另一个库!
jQuery的.css()将%'s和em's转换为它们开始时的等效像素,parseInt()将从返回字符串的末尾删除'px'并将其转换为整数:
http://jsfiddle.net/BXnXJ/
$(document).ready(function () {
var $h1 = $('h1');
console.log($h1);
$h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
$h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});