检测宽度：自动在jQuery

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

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

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

也就是说，而不是上述示例返回一个整数，它将返回auto或undefined。或者，还有一个相当于isAuto的功能吗？

来源

2010-08-24 Derek H

一个略有不同但相关的问题：http://stackoverflow.com/q/8816660/583539 – moey 2012-01-11 09:56:13

我不相信现在可能。至少不在IE以外的浏览器中。 IE实现了element.currentStyle，它表示在CSS文件中写入的样式。另一方面，浏览器的其余部分执行window.getComputedStyle，它返回这些样式的计算值。那就是你在那里收到的，一个数值而不是自动。

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

参考文献：

来源

2010-08-24 14:56:02

请参阅@prdatur对.prop（）的回答。这可以返回'自动'。 – 2015-12-10 21:10:45

@RobertWaddell只适用于'style' *属性*中声明的样式。它不适用于其他任何事情。 https://jsfiddle.net/6m3p4rqp/ – 2015-12-11 13:30:23

@ ionut-g-stan有趣的是，有一个中间地带：如果宽度设置为自动编程（jQuery），则使用.prop（）检索宽度是行不通的。难怪在这些解决方案之间存在不一致。它似乎工作如果设置内联或编程，但不是纯粹在CSS规则设置。你可以看看这个小提琴看到上面的笔记在行动。 https://jsfiddle.net/bvh1e5ud/顺便说一句，我会删除我的downvote，但它被锁定。 – 2016-01-14 20:47:35

我不太清楚如果我正确回答你的问题，但如果你使用width() function这将给你一个整数，表示呈现的像素宽度。

来源

2010-08-24 14:52:35

是的，它的问题是，即使没有明确指定在元素CSS的宽度。

将返回一个整数值。我希望它返回“自动”（或找到一种方法来判断它是否是自动的）。 – 2010-08-24 14:55:47

这是一个棘手的问题，因为即使使用'$（'element'）.css（“width”）;'似乎总是返回一个对象的像素宽度值。即使它设置为100％。这与使用第一个答案中建议的getComputedStyle基本相同。 – Nilloc 2010-08-25 15:46:09

创建函数
通CSS元素的id起作用
写入其中要在元件ID

注的width属性进行语句的情况下：对多张元件使用将是明智的使用循环与元件名称的数组

来源

2010-08-24 21:06:24 elitepraetorian

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

来源

2010-08-24 21:27:18 Alex

不错的概念，但this.style严格限制为内联样式。我想我没有指定，但这显然会有点问题。尽管从外观上看，无论如何，都会出现问题。 – 2010-08-25 15:43:33

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

来源

2014-01-02 21:16:55 zsaat14

这给了我需要的提示。我需要检查一个块是否已经手动设置了其高度。快速添加一个1px div并检查高度是否改变似乎有诀窍。那么......至少在Chrome中至今。 – notacouch 2014-11-05 19:39:37

您的isAuto（'宽度'）在我的应用程序在IE10中不起作用。更改边距对innerWidth没有任何影响（甚至没有边际效果））。附加的代码更类似于高度代码，但确实工作正常。 – 2015-09-23 19:43:30

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

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

为宽度或

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

为高度。

来源

2015-04-28 08:41:53 prdatur

检测宽度：自动在jQuery

回答

相关问题