檢測寬度：自動在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

回答

相關問題