Ermittlung der tatsächlich gerenderten Werte von Elementen, die auf 'auto' gesetzt sind, mit JavaScript

Question

Angenommen, ich habe die folgende HTML und kein CSS

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

Jetzt möchte ich die tatsächliche Pixelbreite und -höhe, die der Browser dieses div als gerendert hat, erhalten.

Kann das mit JS gemacht werden?

Gracias.

Answer 1

Versuchen Sie, einen Verweis auf Ihr div zu erhalten und die offsetWidth et offsetHeight Eigenschaften:

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

offsetWidth/Height misst kumulativ die Ränder des Elements, die horizontale Auffüllung, die vertikale Bildlaufleiste (falls vorhanden, falls gerendert) und die CSS-Breite. Es sind die Pixelwerte der gesamte Platz, den das Element im Dokument einnimmt. Ich glaube, das ist es, was Sie wollen.

Wenn Sie das nicht gemeint haben und es Ihnen lieber ist sólo des Elements width et height (d. h. ohne Füllung, Rand usw.) versuchen getComputedStyle :

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

Die obigen Werte sind die endgültigen, berechneten Pixelwerte für die width et height css-Stil-Eigenschaften (einschließlich der Werte, die durch eine <style> Element oder ein externes Stylesheet).

Wie alles, was hilfreich ist, funktioniert auch dies nicht im IE.

---

Sie sagen, Sie verwenden jQuery. Nun, es ist trivial jetzt, und funktioniert Cross-Browser:

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

Mit jQuery brauchen Sie den ersten Teil dieser Antwort nicht, es ist alles für Sie erledigt ;)

Answer 2

Einer der Vorteile der Verwendung eines Frameworks, wie Prototyp ist, dass die Autoren des Frameworks in der Regel die Portabilitätsprobleme gelöst haben. Auch wenn Sie das Framework nicht verwenden, kann es lehrreich sein, es zu lesen. Im Fall von Prototype berücksichtigt der Code zum Auslesen der Abmessungen eines Elements ein Safari-Problem und ermöglicht es Ihnen, die Breite eines Elements auszulesen, das derzeit nicht eingeblendet ist.

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

Für das jQuery-Framework erledigen .height und .width die Aufgabe.