Js to obtain the width and height of hidden elements

Source: Internet
Author: User
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!


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.


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


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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.