숨겨진 요소의 물리적 크기 가져오기(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 중국어 웹사이트에 주목하세요!