Comment trouver les valeurs réelles rendus d'éléments mis à « auto » en utilisant JavaScript

Question

Supposons que je le code HTML suivant, et aucun CSS

<div> 
    here is some content in this div. it stretches it out 
    <br />and down too! 
</div> 

Maintenant, je veux obtenir la largeur réelle des pixels et la hauteur que le navigateur a rendu cette div comme.

Cela peut-il être fait avec JS?

Merci.

Answer 1

Essayez d'obtenir une référence à votre div et la lecture des offsetWidth et offsetHeight propriétés:

var myDiv = document.getElementById('myDiv'); 
var width = myDiv.offsetWidth; // int 
var height = myDiv.offsetHeight; 

offsetWidth/Height mesures cumulées des frontières de l'élément, rembourrage horizontal, la barre de défilement vertical (le cas échéant, si elles sont données) et la largeur CSS . Ce sont les valeurs de pixel de l'espace entier que l'élément utilise dans le document. Je pense que c'est ce que tu veux.

Si ce n'est pas ce que vous vouliez dire, et que vous préférez seulement essayer getComputedStylewidth et height (hors rembourrage, marge, etc.) de l'élément:

var comStyle = window.getComputedStyle(myDiv, null); 
var width = parseInt(comStyle.getPropertyValue("width"), 10); 
var height = parseInt(comStyle.getPropertyValue("height"), 10); 

Les valeurs ci-dessus seront les valeurs de pixel finales calculées pour les propriétés de style CSS css (<style> ou feuille de style externe).

Comme toutes les choses utiles, cela ne fonctionnera pas dans IE.

---

Vous dites que vous utilisez jQuery. Eh bien, il est trivial maintenant, et travaille cross-browser:

var width = $('div').css('width'); 
var height = $('div').css('height'); 

Avec jQuery vous n'avez pas besoin de la première partie de cette réponse, il est tous pris pour toi;)

Answer 2

L'un des avantages de En utilisant un framework, comme Prototype, les auteurs du framework ont ​​généralement résolu les problèmes de portabilité. Même si vous n'utilisez pas le cadre, il peut toujours être instructif de lire. Dans le cas de Prototype, le code de lecture des dimensions d'un élément tient compte d'un problème Safari et vous permet de lire la largeur d'un élément qui n'est pas actuellement dislayed.

getDimensions: function(element) { 
    element = $(element); 
    var display = $(element).getStyle('display'); 
    if (display != 'none' && display != null) // Safari bug 
    return {width: element.offsetWidth, height: element.offsetHeight}; 

    // All *Width and *Height properties give 0 on elements with display none, 
    // so enable the element temporarily 
    var els = element.style; 
    var originalVisibility = els.visibility; 
    var originalPosition = els.position; 
    var originalDisplay = els.display; 
    els.visibility = 'hidden'; 
    els.position = 'absolute'; 
    els.display = 'block'; 
    var originalWidth = element.clientWidth; 
    var originalHeight = element.clientHeight; 
    els.display = originalDisplay; 
    els.position = originalPosition; 
    els.visibility = originalVisibility; 
    return {width: originalWidth, height: originalHeight}; 
}, 

Answer 3

Pour l'infrastructure jQuery, .height et .width effectuent le travail.