Come posso ottenere una larghezza di div, che è scritta in CSS

Question

Voglio larghezza di un elemento div che è specificato dallo sviluppatore. Se si scrive $('body').width(), verrà fornita la larghezza in px, indipendentemente dal fatto che sia stata specificata o meno.

Ho bisogno della larghezza di div specificata in CSS/JavaScript, ma non è calcolata da jQuery (che non è stata effettivamente specificata ma è stata ereditata).

Se non viene specificata la larghezza, ho bisogno di sapere.

Answer 1

Il codice sotto ciclo volontà attraverso tutti i fogli di stile così come proprietà di stile dell'elemento corrispondente. Questa funzione restituirà un array di larghezze.

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"); 

Fiddle here

C'è un problema che posso vedere anche se, come più selettori possono essere specificate nel selectorText cioè

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

In questi casi l'ID passato come argomento sarà non corrisponde alla proprietà selectorText. Forse qualcuno può inventare un'espressione regolare che corrisponda all'id specificato :)

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> 

Possibilmente duplicato con get CSS rule's percentage value in jQuery o Getting values of global stylesheet in jQuery

Answer 4

Si potrebbe utilizzare la proprietà clientWidth, calcola la larghezza effettiva dell'elemento, a prescindere se impostato tramite CSS o se è il flusso naturale del documento :

document.getElementById('divId').clientWidth 

Se si desidera che la larghezza del contenuto completa con margini/imbottiture/confine è possibile utilizzare 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

Per la larghezza Javascript specificato, si può provare questo:

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

Se quanto sopra restituisce una stringa vuota, significa che non è stato specificato da Javascript.

Per quanto riguarda le regole specificate tramite CSS, trovare il nome della classe (s) dell'elemento e poi le regole specificate per quella classe:

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

var = cssWidth getWidthFromClassname (className);

Ora è necessario definire 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; 
}