js gets the width and height of hidden elements

Get the physical size of the hidden element (display:none)

Problems and scenarios

If we have such an input box, click to expand the selection . As shown below:

The input box and the expanded area below are separated, two independent controls! The optional box below the initial state is hidden (ng-show=false)

The height of the foldable component accordion in the expanded area (corresponding to the province, sorting field, and short message part in the picture) changes with the data. Adapt to expand and click the accordion to have a height-changing animation effect when folding and shrinking!

When calculating the height of the accordion, the height of the data node element cannot be obtained, resulting in the height of the accordion being 0 and unable to be folded!

Cause

The physical size of its child elements cannot be obtained in a hidden p element node! That is, when the expanded area below the input box is still hidden, the accordion control cannot obtain the height of the data DOM node element.

Solution

height() and width() in JQuey ) method to get the size of the hidden element. But this can only get the height of the hidden element, not the height of the internal sub-elements! ! !

Solution: JS controls the hiding and display of css setting elements

Code ideas: Show hidden elements (remove the hiding mode of the element, css attribute display:none or some style classes) ---> Calculate the height of the target element ---> Restore the style of the hidden element

Problems:

1. Elements will flash when switching between display and hiding----> Solution: Use the visibility:hidden invisible attribute in CSS, visibility: hidden hidden elements have physical dimensions.

If the height calculation can be completed in a very short time, this flickering phenomenon can be ignored!

2. After the element is displayed, it will occupy the physical size and may affect the position of other elements ----> Solution: Move this hidden element off the screen or out of the document flow (position: absolute).

The sample code is as follows:

Call the getSize method to pass in the hidden element element and the target element whose size needs to be obtained to return the size of 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;
 }
};

For more js related articles about getting the width and height of hidden elements, please pay attention to the PHP Chinese website!