js ermittelt die Breite und Höhe versteckter Elemente

Ermitteln Sie die physische Größe des ausgeblendeten Elements (Anzeige: keine)

Probleme und Szenarien

Wenn wir ein solches Eingabefeld haben, klicken Sie auf Erweitern Sie die Auswahl. Wie unten gezeigt:

Hier sind das Eingabefeld und der erweiterte Bereich darunter getrennt, zwei unabhängige Steuerelemente! Das optionale Feld unter dem Ausgangszustand ist ausgeblendet (ng-show=false)

Die Höhe des faltbaren Komponentenakkordeons im erweiterten Bereich (entsprechend der Provinz, dem Sortierfeld und dem Kurznachrichtenteil im Bild) Passen Sie es an die Daten an, um es zu erweitern, und klicken Sie auf das Akkordeon, um beim Falten und Verkleinern einen höhenverändernden Animationseffekt zu erzielen!

Bei der Berechnung der Höhe des Akkordeons kann die Höhe des Datenknotenelements nicht ermittelt werden, was dazu führt, dass die Höhe des Akkordeons 0 ist und nicht gefaltet werden kann!

Grund

Die physische Größe seiner untergeordneten Elemente kann in einem versteckten p-Elementknoten nicht ermittelt werden! Das heißt, wenn der erweiterte Bereich unter dem Eingabefeld noch ausgeblendet ist, kann das Akkordeon-Steuerelement die Höhe des Daten-DOM-Knotenelements

Lösung

height( nicht ermitteln. ) und width() in JQuey ), um die Größe des ausgeblendeten Elements zu ermitteln. Dies kann jedoch nur die Höhe des ausgeblendeten Elements ermitteln, nicht die Höhe der internen Unterelemente! ! !

Lösung: JS steuert das Ausblenden und Anzeigen von CSS-Einstellungselementen

Codeideen: Ausgeblendete Elemente anzeigen (Entfernen Sie den Ausblendmodus des Elements, CSS-Attributanzeige: keine oder bestimmte Stilklassen) ---> Berechnen Sie die Höhe des Zielelements ---> Stellen Sie den Stil des ausgeblendeten Elements wieder her

Bestehende Probleme:

1. Das Element blinkt beim Umschalten zwischen Anzeigen und Ausblenden----> Attribut in CSS, Sichtbarkeit: Versteckte versteckte Elemente haben physische Dimensionen.

Wenn die Höhenberechnung in sehr kurzer Zeit abgeschlossen werden kann, kann dieses Flackerphänomen ignoriert werden!

2. Nachdem das Element angezeigt wurde, nimmt es die physische Größe ein und kann die Position anderer Elemente beeinflussen ----> Lösung: Verschieben Sie dieses ausgeblendete Element vom Bildschirm oder aus dem Dokumentfluss (Position). : absolut).

Der Beispielcode lautet wie folgt:

Rufen Sie die Methode getSize auf und übergeben Sie das versteckte Elementelement und das Zielelement, dessen Größe ermittelt werden muss, um die Größe von targetEl zurückzugeben! ! !

//获取元素的物理尺寸，参数：element隐藏的元素节点;targetEl需要获取尺寸的目标元素
this.getSize = function(element,targetEl) {
 //增加隐藏，防止element在取消隐藏时闪烁; position: absolute;和display:none看需要是否加上
 var _addCss = { visibility: 'hidden' };
 var _oldCss = {};
 var _width;
 var _height;
 if (this.getStyle(element, "display") != "none") {
  return { width: !!targetEl ? targetEl.offsetWidth : element.offsetWidth , height: !!targetEl ? targetEl.offsetHeight : element.offsetHeight };
 }
 for (var i in _addCss) {
  _oldCss[i] = this.getStyle(element, i);
 }
 this.setStyle(element, _addCss);
 //这里是通过angularjs的ng-show指令隐藏元素的，去掉ng-hide样式类就可以取消隐藏
 var _isNgHide = element.classList.contains("ng-hide");
 _isNgHide && element.classList.remove("ng-hide");
 _width = !!targetEl ? targetEl.offsetWidth : element.offsetWidth;
 _height =!!targetEl ? targetEl.offsetHeight : element.offsetHeight;
 //还原之前的样式，class
 this.setStyle(element, _oldCss);
 _isNgHide && element.classList.add("ng-hide");
 return { width: _width, height: _height };
};

this.getStyle = function(element, styleName) {
 return element.style[styleName] ? element.style[styleName] : element.currentStyle ? element.currentStyle[styleName] : window.getComputedStyle(element, null)[styleName];
};
this.setStyle = function(element, obj){
 if (angular.isObject(obj)) {
  for (var property in obj) {
   var cssNameArr = property.split("-");
   for (var i = 1,len=cssNameArr.length; i < len; i++) {
    cssNameArr[i] = cssNameArr[i].replace(cssNameArr[i].charAt(0), cssNameArr[i].charAt(0).toUpperCase());
   }
   var cssName = cssNameArr.join("");
   element.style[cssName] = obj[property];
  }
 }
 else if (angular.isString(obj)) {
  element.style.cssText = obj;
 }
};

Weitere js-bezogene Artikel zum Ermitteln der Breite und Höhe versteckter Elemente finden Sie unter PHP chinesische Website!