Heim > Web-Frontend > js-Tutorial > Hauptteil

JS-Methode zum Ermitteln der Höhe eines unbekannten DIV

高洛峰
Freigeben: 2016-12-24 15:05:37
Original
1439 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die JS-Methode zum Ermitteln der Höhe eines unbekannten DIV. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Höhe des Elements kann über das clientHeight-Attribut des Elements abgerufen werden, z. B.:

var height = element.clientHeight;
Nach dem Login kopieren

Die Einschränkungen dieses Ansatzes:

1 Wenn das Anzeigeattribut des Elements auf „Keine“ gesetzt ist, ist das erhaltene Ergebnis 0

2. Im Safari-Browser müssen Sie Folgendes verwenden: element.offsetHeight, um die tatsächliche Höhe zu erhalten. Dies ist ein Fehler im Safari-Browser.

Das Folgende ist die von Prototype bereitgestellte Methode, die mit verschiedenen Browsern kompatibel ist und auch korrekt funktioniert Ermitteln Sie die Elementgröße, wenn das Element ausgeblendet 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};
}
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle in der JavaScript-Programmierung hilfreich ist.


Weitere JS-Methoden zum Abrufen unbekannter DIV-Höhenartikel finden Sie auf der chinesischen PHP-Website!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!