检测宽度：jQuery中的自动答案

【问题标题】：Detecting width: auto in jQuery检测宽度：jQuery中的自动
【发布时间】：2011-04-03 05:32:50
【问题描述】：

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

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

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

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

【问题讨论】：

一个略有不同但相关的问题：stackoverflow.com/q/8816660/583539

标签： javascript jquery css dom computed-style

【解决方案1】：

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

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

宽度或

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

高度。

【讨论】：

【解决方案2】：

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

解决它的唯一方法是解析来自 document.styleSheets 的 CSS 声明。

参考资料：

【讨论】：

查看@prdatur 对 .prop() 的回答。这可以返回“自动”。
@RobertWaddell 仅适用于在 style 属性中声明的样式。它不适用于其他任何东西。 jsfiddle.net/6m3p4rqp
@ionut-g-stan 有趣的是，有一个中间立场：如果宽度设置为自动编程（jQuery），使用 .prop() 检索宽度确实有效。难怪在这方面的解决方案之间存在不一致。如果以内联或编程方式设置，它似乎可以工作，但如果纯粹在 CSS 规则中设置则不行。您可以查看此小提琴以查看上述说明。 jsfiddle.net/bvh1e5ud 顺便说一句，我会删除我的反对票，但它已被锁定。

【解决方案3】：

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

【讨论】：

不错的概念，但 this.style 仅限于内联样式。我想我没有具体说明，但这显然会有点问题。虽然从表面上看，无论如何都会有问题。

【解决方案4】：

据我所知，没有原生的 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 演示插件的功能。

【讨论】：

这给了我需要的提示。我需要检查一个块是否手动设置了它的高度。快速添加一个 1px 的 div 并检查高度是否改变似乎可以解决问题。嗯......至少到目前为止在 Chrome 中。
您的 isAuto('width') 在我的 IE10 应用中不起作用。更改边距对innerWidth 没有影响（甚至没有边距；））。与高度代码更相似的附加代码确实可以正常工作。

【解决方案5】：

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

【讨论】：

是的，即使在 CSS 中没有为元素明确指定宽度，它也会出现问题。
将返回一个整数值。我希望它返回“自动”（或找到一种方法来判断它是否是自动的）。
这是一个棘手的问题，因为即使使用$('element').css("width"); 似乎总是返回对象的像素宽度值。即使它设置为 100%。这与使用第一个答案中建议的 getComputedStyle 基本相同。

【解决方案6】：

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

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

【讨论】：