> 웹 프론트엔드 > JS 튜토리얼 > js는 숨겨진 요소의 너비와 높이를 가져옵니다.

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

高洛峰
풀어 주다: 2017-02-25 16:17:58
원래의
1791명이 탐색했습니다.

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

문제 및 시나리오

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

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

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

여기서 입력 상자와 아래 확장 영역이 분리되어 있으며 두 개의 독립적인 컨트롤이 있습니다! 초기상태 아래의 옵션박스는 숨겨집니다(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 중국어 웹사이트에 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿