js obtient la largeur et la hauteur des éléments cachés

Obtenir la taille physique de l'élément caché (affichage : aucun)

Problèmes et scénarios

Si nous avons une telle zone de saisie, cliquez pour élargir la sélection. Comme indiqué ci-dessous :

Ici, la zone de saisie et la zone développée ci-dessous sont séparées, deux contrôles indépendants ! La case facultative sous l'état initial est masquée (ng-show=false)

La hauteur de l'accordéon du composant pliable dans la zone développée (correspondant à la province, au champ de tri et à la partie du message court dans l'image) change avec les données. Adaptez-vous pour agrandir et cliquez sur l'accordéon pour avoir un effet d'animation de changement de hauteur lors du pliage et du rétrécissement !

Lors du calcul de la hauteur de l'accordéon, la hauteur de l'élément du nœud de données ne peut pas être obtenue, ce qui fait que la hauteur de l'accordéon est de 0 et ne peut pas être plié !

Raison

La taille physique de ses éléments enfants ne peut pas être obtenue dans un nœud d'élément p caché ! Autrement dit, lorsque la zone développée sous la zone de saisie est toujours masquée, le contrôle accordéon ne peut pas obtenir la hauteur de l'élément du nœud DOM de données

Solution

hauteur (. ) et width() dans JQuey ) pour obtenir la taille de l'élément caché. Mais cela ne peut obtenir que la hauteur de l’élément caché, pas la hauteur des éléments enfants internes ! ! !

Solution : JS contrôle le masquage et l'affichage des éléments de paramètres CSS

Idées de code : Afficher les éléments cachés (supprimer le mode masquage de l'élément, affichage des attributs CSS : aucun ou certaines classes de style) ---> Calculer la hauteur de l'élément cible --->

Problèmes existants :

1. L'élément clignote lors du basculement entre l'affichage et le masquage ----> attribut en CSS, visibilité : les éléments cachés ont des dimensions physiques.

Si le calcul de la hauteur peut être réalisé en très peu de temps, ce phénomène de scintillement peut être ignoré !

2. Une fois l'élément affiché, il occupera la taille physique et peut affecter la position des autres éléments ----> Solution : Déplacez cet élément masqué hors de l'écran ou hors du flux de documents (position : absolu).

L'exemple de code est le suivant :

Appelez la méthode getSize et transmettez l'élément caché et l'élément cible dont la taille doit être obtenue pour renvoyer la taille de targetEl ! ! !

//获取元素的物理尺寸，参数：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;
 }
};

Pour plus d'articles liés à JS sur l'obtention de la largeur et de la hauteur des éléments cachés, veuillez faire attention au Site Web chinois PHP !