javascript - 检测宽度：jQuery中的自动

Question

我正在使用 jQuery 检索元素的宽度，如果我可以指示是否指定了明确的宽度（和高度），我会更喜欢它。

<div id="test"></div>
<script type="text/javascript">
$(function() { alert($('#test').css('width')); });
</script>

这将根据它在客户端屏幕上占用的像素数来提醒 div 的隐式宽度。如果宽度丢失或设置为width: auto可以使用 jQuery 验证，有什么方法吗？

也就是说，不是上面的示例返回一个整数，而是返回autoor undefined。或者，是否有等效的isAuto功能？

score 10 · Accepted Answer

这将在绝对值上获得字符串“auto”或“180px”。

$('element').prop('style').width

对于宽度或

$('element').prop('style').height

为高度。

score 9 · Accepted Answer

我暂时不相信这是可能的。至少在 IE 以外的任何其他浏览器中都没有。表示样式的IE 实现element.currentStyle是在 CSS 文件中编写的。另一方面，其余浏览器实现window.getComputedStyle返回这些样式的计算值。这就是你在那里收到的，一个数值而不是 auto。

解决它的唯一方法是从document.styleSheets.

参考：

score 4 · Accepted Answer

~~$('#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;
};

例如：http: //jsfiddle.net/KxTLE/6/

score 3 · Accepted Answer

据我所知，没有原生的 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');

这是一个演示插件功能的小提琴。

score 0 · Accepted Answer

我不太确定我是否正确回答了您的问题，但是如果您使用width() 函数，这将为您提供一个整数，表示以像素为单位的渲染宽度。

score 0 · Accepted Answer

创建函数
将 css 元素 id 传递给函数
写一个 case where 语句要对元素 id 的 width 属性执行

注意：在多个元素上使用将是明智的使用带有元素名称数组的循环

javascript - 检测宽度：jQuery中的自动

6 回答 6

Related

Reference