Js to obtain the width and height of hidden elements

This article describes how to use js to obtain hidden element width and code ideas. It has good reference value. Let's take a look at the following section to obtain the physical size of hidden elements (display: none ).

Problems and scenarios

If we have such an input box, click to expand the selection. For example:

Here, the input box is separated from the expanded area at the bottom. There are two independent controls! The optional boxes in the initial status are hidden (ng-show = false)

In the displayed area, the height of the foldable component accordion (corresponding to the province, sorting field, and short message in the figure) is automatically extended with the data. Clicking accordion collapse and contraction has a height-changing animation effect!

When calculating the height of accordion, the height of the data node element cannot be obtained. As a result, the height of accordion is 0 and cannot be folded!

Cause

The physical size of its child element cannot be obtained in a hidden p element node! The accordion control cannot obtain the height of the DOM node element in the expanded area or hidden area in the input box.

Solution

In JQuey, the height () and width () methods are used to obtain the sizes of hidden elements. However, only the height of hidden elements can be obtained. The height of internal sub-elements cannot be obtained !!!

Solution:JS controls the hiding and display of css settings Elements

Code:Show Hidden elements (excluding element hiding, css attribute display: none or some style classes) ---> calculate the target element height ---> restore the hidden element style

Problems:

1. elements will flash when switching between display and hiding ----> solution: Use the visibility: hidden invisible attribute in css, and the visibility: hidden element has a physical size.

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

2. After the element is displayed, it occupies the physical size and may affect the location of other elements ----> solution: remove the hidden element from the screen or exit the Document Stream (position: absolute ).

The sample code is as follows:

Call the getSize method to pass in the hidden element and the target element to obtain the size to return the targetEl size !!!

// Obtain the physical size of the element. Parameter: hidden element node of the element. targetEl needs to obtain the target element of the size. this. getSize = function (element, targetEl) {// Add hide to prevent element flickering when unhide; position: absolute; and display: none to check whether var _ addCss = {visibility: 'den den '}; 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); // here, the ng-show command of angularjs is used to hide elements. Remove the ng-hide style class to unhide 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; // restore the previous style, 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 details about how to obtain the width and height of hidden elements in Javascript, refer to the PHP Chinese website!