Home > Web Front-end > JS Tutorial > body text

js gets the width and height of hidden elements

高洛峰
Release: 2017-02-25 16:17:58
Original
1752 people have browsed it

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:

js gets the width and height of hidden elements

js gets the width and height of hidden elementsjs gets the width and height of hidden elements

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 };
};
Copy after login

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;
 }
};
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!