js는 숨겨진 요소의 너비와 높이를 가져옵니다.

숨겨진 요소의 물리적 크기 가져오기(display:none)

문제 및 시나리오

그러한 입력 상자가 있는 경우 다음을 클릭하세요. 선택 항목을 확장합니다. 아래와 같이

여기서 입력 상자와 아래 확장 영역이 분리되어 있으며 두 개의 독립적인 컨트롤이 있습니다! 초기상태 아래의 옵션박스는 숨겨집니다(ng-show=false)

확장된 영역의 접이식 구성요소 아코디언의 높이(사진의 지방, 정렬 필드, 단문 메시지 부분에 해당) 데이터에 따라 변경됩니다. 접거나 축소할 때 아코디언을 클릭하여 높이가 바뀌는 애니메이션 효과를 적용하세요!

아코디언 높이를 계산할 때 데이터 노드 요소의 높이를 구할 수 없어 아코디언 높이가 0이 되어 접을 수 없게 됩니다!

이유

숨겨진 p 요소 노드에서는 하위 요소의 물리적 크기를 얻을 수 없습니다! 즉, 입력 상자 아래 확장된 영역이 여전히 숨겨져 있는 경우 아코디언 컨트롤은

해결책

높이( ) 및 JQuey의 width() 메소드를 사용하여 숨겨진 요소의 크기를 가져옵니다. 하지만 이는 내부 하위 요소의 높이가 아닌 숨겨진 요소의 높이만 얻을 수 있습니다! ! !

해결책: JS는 CSS 설정 요소의 숨기기 및 표시를 제어합니다

코드 아이디어: 숨겨진 요소 표시(요소의 숨기기 모드 제거, CSS 속성 표시:없음 또는 특정 스타일 클래스) ---> 대상 요소의 높이 계산 ---> 숨겨진 요소의 스타일 복원

기존 문제:

1. 표시와 숨기기 전환 시 요소가 깜박입니다.----> CSS에서 가시성: 숨겨진 숨겨진 요소는 물리적 크기를 갖습니다.

아주 짧은 시간에 높이 계산이 완료된다면 이런 깜박임 현상은 무시할 수 있습니다!

2. 요소가 표시된 후에는 실제 크기를 차지하며 다른 요소의 위치에 영향을 미칠 수 있습니다. ----> 해결책: 이 숨겨진 요소를 화면 밖으로 이동하거나 문서 흐름(위치 : 절대).

샘플 코드는 다음과 같습니다.

getSize 메소드를 호출하고 숨겨진 요소 요소와 크기를 구해야 하는 대상 요소를 전달하여 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;
 }
};

숨겨진 요소의 너비와 높이를 얻는 방법에 대한 더 많은 js 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!