我怎樣才能得到div的寬度，這是用CSS編寫的

Question

我想要一個由開發人員指定的div元素的寬度。 意思是如果你寫$('body').width()，它會提供你在px的寬度，無論你是否指定。

我需要在CSS/JavaScript中指定的div的寬度，但不是由jQuery計算的（實際上沒有指定但是被繼承）。

如果未指定寬度，則需要知道。

Answer 1

下面將循環的代碼通過所有的樣式以及匹配元素的樣式屬性。該函數將返回一個寬度數組。

function getCSSWidths(id) { 

    var stylesheets = document.styleSheets; 
    var widths = []; 
    var styleWidth; 

    // loop through each stylesheet 
    $.each(stylesheets, function(i, sheet) { 

     var len = (sheet.rules.length || sheet.cssRules.length); 
     var rules = sheet.rules || sheet.cssRules; 

     // loop through rules 
     for (var i=0; i < len; i++) { 

      var rule = rules[i]; 

      // if width is specified in css add to widths array 
      if (rule.selectorText.toLowerCase() == "#" + id.toLowerCase()) { 
       widths.push(rule.style.getPropertyValue("width")); 
      } 
     } 
    }); 

    var el = document.getElementById(id); 

    // get width specified in the html style attribute 
    if(el && el.style && el.style.width) { 
     widths.push(el.style.width); 
    } 

    return widths; 
} 

getCSSWidths("test"); 

小提琴here

這裏有一個問題，我可以看到，雖然多重選擇器可以在selectorText即

#id1, #id2, .class1 { 
    // properties 
} 

在這種情況下，ID傳遞作爲一個參數指定將不匹配selectorText屬性。也許有人可以想出一個正則表達式，將匹配指定的ID :)

Answer 2

document.getElementById('divid').style.width 

Answer 3

<style type="text/css"> 
    .largeField { 
     width: 65%; 
    } 
</style> 
<script> 
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules; 
    for (var i=0; rules.length; i++) { 
     var rule = rules[i]; 
     if (rule.selectorText.toLowerCase() == ".largefield") { 
      alert(rule.style.getPropertyValue("width")); 
     } 
    } 
</script> 

有可能複製get CSS rule's percentage value in jQuery或Getting values of global stylesheet in jQuery

Answer 4

你可以使用clientWidth屬性，它計算元素的實際寬度，無論如果通過CSS設置或者如果它是文檔的自然流動：

document.getElementById('divId').clientWidth 

如果你想利潤率/墊襯/邊框全部內容寬度可以使用offsetWidth：

document.getElementById('divId').offsetWidth 

https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth
https://developer.mozilla.org/en-US/docs/DOM/element.clientWidth

Answer 5

對於JavaScript的指定的寬度，你可以試試這個：

document.getElementById("myDivElement").style.width

如果上面返回一個空字符串，這意味着它沒有指定通過Javascript。

至於通過CSS指定的規則，發現該元素的類名（多個），然後該類別中指定的規則：

var className = document.getElementById("myDivElement").className;

變種cssWidth = getWidthFromClassname（類名）;

現在你需要定義getWidthFromClassname：

function getWidthFromClassname(className) 
{ 
    var reqWidth; 
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules 
    for(var x=0;x<classes.length;x++) { 
     if(classes[x].selectorText==className) { 
      reqWidth = classes[x].style.getPropertyValue("width"); 
      break; 
     } 
    } 

    return reqWidth; 
}