javascript 检测宽度：jQuery 中的自动

Detecting width: auto in jQuery

提问by Derek H

I'm retrieving the width of elements using jQuery and would prefer it if I could have an indication of whether there was an explicit width (and height) specified.

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

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

This will alert the implicit width of the div in terms of how many pixels it takes up on the client's screen. Is there any way that if the width is either missing or set as width: autothat it can be verified using jQuery?

这将根据它在客户端屏幕上占据多少像素来提醒 div 的隐式宽度。有没有办法width: auto可以使用jQuery验证宽度是否丢失或设置为该宽度？

That is, instead of the above example returning an integer, it would return either autoor undefined. Or, alternatively, is there an equivalent of a isAutofunction?

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

采纳答案by Ionu? G. Stan

I don't believe it's possible for the moment. At least not in any other browser than IE. IE implements element.currentStylewhich represents styles at they were written in the CSS file. On the other hand, the rest of the browsers implement window.getComputedStylewhich returns the computed valuesof those styles. That's what you receive there, a numeric value instead of auto.

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

The only way around it would be to parse CSS declarations from document.styleSheets.

解决它的唯一方法是从 .css 文件中解析 CSS 声明document.styleSheets。

References:

参考：

• http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx
• https://developer.mozilla.org/en/DOM:window.getComputedStyle
• https://developer.mozilla.org/en/CSS/computed_value

• http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx
• https://developer.mozilla.org/en/DOM:window.getComputedStyle
• https://developer.mozilla.org/en/CSS/computed_value

回答by prdatur

This will get either string "auto" or "180px" on absolute values.

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

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

for width or

对于宽度或

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

for height.

为高度。

回答by Alex

$('#test')[0].style.width=="auto"should work: http://jsfiddle.net/KxTLE/and http://jsfiddle.net/KxTLE/1/Try

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

And example: http://jsfiddle.net/KxTLE/6/

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

回答by zsaat14

As far as I know, there is no native jQuery function to detect auto widths or heights. So I wrote a plugin to do it.

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

Originally, I had written it to do height, so I just expanded it to include width. You just call it like this:

最初，我写它来做高度，所以我只是将它扩展到包括宽度。你只是这样称呼它：

$('#element').isAuto('width');

or

或者

$('#element').isAuto('height');

Here is a fiddledemonstrating the plugin's functionality.

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

回答by elitepraetorian

1. create function
2. pass css element id to function
3. write a case where statement to be performed on the width property of the element id

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

NOTE: to use on mulitple elements would be wise to use a loop with an array of element names

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

回答by Giles Smith

I am not quite sure if I am answering your question correctly, but if you use the width() functionthis will give you an integer representing the rendered width in pixels.

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