我正在使用jQuery检索元素的宽度,如果我可以指示是否指定了明确的宽度(和高度),我会更喜欢它。
<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>
这将根据客户端屏幕上占用的像素数来警告div的隐式宽度。有没有办法,如果宽度丢失或设置为width: auto
,可以使用jQuery验证?
也就是说,代替上面的示例返回一个整数,它将返回auto
或undefined
。或者,是否存在等效的isAuto
函数?
答案 0 :(得分:8)
我不相信这一刻是可能的。至少不在IE以外的任何其他浏览器中。 IE实现了element.currentStyle
,表示在CSS文件中编写的样式。另一方面,其余浏览器实现window.getComputedStyle
,返回这些样式的计算值。这就是你在那里收到的,一个数值而不是自动。
解决它的唯一方法是解析来自document.styleSheets
的CSS声明。
参考文献:
答案 1 :(得分:8)
这将获得字符串&#34; auto&#34;或&#34; 180px&#34;关于绝对值。
$('element').prop('style').width
表示宽度或
$('element').prop('style').height
高度。
答案 2 :(得分:4)
试试$('#test')[0].style.width=="auto"
应该有效:http://jsfiddle.net/KxTLE/和http://jsfiddle.net/KxTLE/1/
jQuery.fn.isAuto=function() {
if(this[0]) {
var ele=$(this[0]);
if(this[0].style.width=='auto' || ele.outerWidth()==ele.parent().width()) {
return true;
} else {
return false;
}
}
return undefined;
};
答案 3 :(得分:3)
据我所知,没有原生的jQuery函数来检测自动宽度或高度。所以我写了一个插件来做它。
$.fn.isAuto = function(dimension){
if (dimension == 'width'){
var originalWidth = this.innerWidth();
var marginLeft = parseInt(this.css('margin-left'));
var testMarginWidth = marginLeft+50;
this.css('margin-left', testMarginWidth);
var newWidth = this.innerWidth();
this.css('margin-left', marginLeft);
if(newWidth<originalWidth){
return true;
}
else{
return false;
}
}
else if(dimension == 'height'){
var originalHeight = this.height();
this.append('<div id="test"></div>');
var testHeight = originalHeight+500;
$('#test').css({height: testHeight});
var newHeight = this.height();
$('#test').remove();
if(newHeight>originalHeight){
return true;
}
else{
return false;
}
}
};
最初,我把它写成了高度,所以我只是把它扩展到包含宽度。你只需要这样称呼它:
$('#element').isAuto('width');
或
$('#element').isAuto('height');
这是展示插件功能的fiddle。
答案 4 :(得分:0)
我不确定我是否正确回答了您的问题,但是如果您使用width() function,则会给出一个表示渲染宽度的整数(以像素为单位)。
答案 5 :(得分:0)
注意:要使用多个元素,最好使用带有元素名称数组的循环