Maison > interface Web > js tutoriel > js obtient la largeur et la hauteur des éléments cachés

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

高洛峰
Libérer: 2017-02-25 16:17:58
original
1791 Les gens l'ont consulté

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 :

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

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

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 };
};
Copier après la connexion

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;
 }
};
Copier après la connexion
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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal