javascript_javascript 스킬에서 숨겨진 요소(display:none)의 높이와 너비를 얻는 방법

JS는 표시되는 요소의 크기를 가져오는 데 상대적으로 편리합니다.

코드 복사 코드

function getDefaultStyle(obj,attribute){ // IE 및 DOM과 호환되는 최종 스타일 함수를 반환하고 매개변수 설정: 요소 객체, 스타일 특성
return obj.currentStyle ?obj.currentStyle[attribute ]:document.defaultView.getCompulatedStyle(obj,false)[attribute];
}

그러나 이 요소가 숨겨진 경우(display:none), 크기를 알 수 없습니다. 위의 방법이 어떻게 작동하지 않을 수 있습니까? display:none 요소는 물리적 크기가 없기 때문입니다! 이런 비극이 일어났습니다!

다행히도 CSS에는 보이지 않는 속성인 visible:hidden이 있습니다. 이 속성과 display:none의 가장 큰 차이점은 visible:hidden이 물리적인 크기를 갖는다는 것입니다. 물리적 크기가 있는 경우 위의 방법을 통해 크기를 얻을 수 있지만, display:none을 visible:hidden으로 변경한 후에는 가져온 직후에 visible:hidden을 display:none으로 변경하더라도 페이지에 빈 공간이 생깁니다. 크기에 따라 페이지가 약간 흔들릴 수 있습니다. 그런 다음 가장 좋은 방법은 숨겨진 요소를 화면 밖으로 이동하거나 문서 흐름 밖으로 이동하는 것입니다(위치: 절대). 완벽해 보이지만 비극이 다시 발생합니다. 이 요소를 다시 표시하려는 경우 요소가 표시되지 않고 위치가 잘못됩니다. 왜냐하면 이 요소는 visible:hidden;position:absolute이기 때문입니다. 따라서 사이즈를 구한 후에는 스타일을 다시 복원해야 합니다. 위치 및 가시성 속성을 원래 스타일로 다시 설정하면 됩니다.

js에서 숨겨진 요소의 크기를 구하는 기본 구현 방법입니다. 관심이 있는 경우 "JavaScript 마스터하기" 책에서 해당 방법을 읽어보세요.

여기서 간단한 데모도 만들었습니다. 소스 코드를 살펴보세요.

코드 복사 코드 다음과 같습니다:

 

这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，可见容器
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

 

这是test容器，这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，
这是test容器，

       

点我

       

： 一般 js 的框架 的框架, 库都已经封装了这个方法 库都已经封装了这个方法, 比如 jq, 我们可以直接使用 height () 和 width () 方法获取隐藏元素的尺寸。