JS에 의해 가시 요소의 크기를 얻는 것이 매우 편리합니다. 이 방법을 직접 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
function getDefaultStyle (obj, attribute) {// IE 및 DOM과 호환되는 최종 스타일 함수를 반환합니다. 매개 변수 세트 : 요소 객체, 스타일 특성
return obj.currentStyle? obj.currentStyle [속성] : document.defaultView.getComputedStyle (obj, false) [속성];
}
그러나이 요소가 숨겨져 있고 (디스플레이 : 없음) 크기가 알려지지 않은 경우 위의 방법은 작동하지 않습니다! 디스플레이 : 없음 요소는 물리적 크기가 없습니다! 비극은 이렇게 일어났다!
다행히도, 가시성도 있습니다 : 보이지 않는 CSS에 숨겨져 있습니다. 그것과 디스플레이의 가장 큰 차이점 : 아무것도 가시성입니다. 물리적 크기가있는 경우 위의 방법으로 크기를 얻을 수 있지만 디스플레이를 변경 한 후에는 : 가시성에 대한 없음 : 숨겨져 있으면 페이지에 빈 공간이 있습니다. 가시성을 변경하더라도 : 표시가 숨겨져 있습니다 : 크기를 얻은 직후에 페이지의 일부는 여전히 흔들립니다. 그런 다음 가장 좋은 방법은이 숨겨진 요소를 화면에서 또는 문서 스트림에서 벗어나는 것입니다 (위치 : 절대). 이것은 완벽 해 보이지만 비극은 다시 발생합니다. 이 요소를 다시 표시하려면 요소가 보이지 않으며 위치가 옳지 않습니다. 요소의 가시성이기 때문입니다. 숨겨진; 위치 : 절대. 따라서 크기를 얻은 후에는 스타일을 복원해야합니다. 위치 및 가시성 속성을 원래 스타일로 되돌려 놓는 것입니다.
이것은 숨겨진 요소의 크기를 얻기위한 JS의 기본 구현입니다. 관심이 있으시면 "JavaScript의 능력"이라는 책의 방법을 살펴볼 수 있습니다.
여기에서 간단한 데모를 만들었습니다. 소스 코드를 확인할 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> js는 숨겨진 요소의 크기를 가져옵니다 </title>
<스타일 유형 = "텍스트/CSS">
</스타일>
<script type = "text/javaScript"src = "http://www.css88.com/tool/css3preview/jquery-1.4.2.min.js"> </script>
</head>
<body>
<div id = "test_display_block"style = "display : none; border : 10px solid #cdcdcd; margin-left : 100px"> 이것은 테스트 컨테이너, 보이는 컨테이너 <br /> 테스트 컨테이너입니다. 보이는 컨테이너 <br /> 보이는 컨테이너 <br /> 이것은 테스트 컨테이너입니다. 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너. 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너. 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너. 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너, 테스트 컨테이너,
<div id = "test_display_none"style = "display : none; border : 10px solid #cdcdcd"> 이것은 테스트 컨테이너입니다. 이것은 테스트 컨테이너입니다. 이것은 테스트 컨테이너입니다. <br /> 이것은 테스트 컨테이너입니다. <br /> 이것은 테스트 컨테이너입니다. <br /> < /div> < /div>입니다.
<div id = "test_display_click"> me </div>를 클릭하십시오
<script type = "text/javaScript">
// 객체 유형을 판단합니다
함수 gettype (o) {
var _t;
return (((_t = typeof (o)) == "object"? o == null && "null"|| object.prototype.tostring.call (o) .slice (8, -1) : _ t) .tolowscase ();
}
// 요소 스타일을 얻습니다
함수 getStyle (el, 스타일 이름) {
el.style [스타일 이름]을 반환합니까? el.style [스타일 라인] : el.currentStyle? el.currentStyle [Stylename] : Window.getComputedStyle (EL, NULL) [스타일 라인];
}
함수 getStylenum (el, 스타일 라인) {
parseint (getstyle (el, stylename) .replace (/px | pt | em/ig, '');
}
함수 setStyle (el, obj) {
if (getType (obj) == "object") {
for (s in obj) {
var cssarrrt = s.split ( "-");
for (var i = 1; i <cssarrrt.length; i ++) {
cssarrrt [i] = cssarrrt [i] .replace (cssarrrt [i] .charat (0), cssarrrt [i] .charat (0) .touppercase ());
}
var cssarrtnew = cssarrrt.join ( "");
el.style [cssarrtnew] = obj [s];
}
}
또 다른
if (getType (obj) == "String") {
el.style.csstext = obj;
}
}
함수 getsize (el) {
if (getStyle (el, "display")! = "none") {
반환 {너비 : el.offsetwidth || getstylenum (el, "너비"), 높이 : el.offsetheight || getstylenum (el, "높이")};
}
var _addcss = {display : "", 위치 : "절대", 가시성 : '숨겨진'};
var _oldcss = {};
for (i in _addcss) {
_oldcss [i] = getstyle (el, i);
}
setstyle (el, _addcss);
var _width = el.clientWidth || getstylenum (el, "너비");
var _height = el.clientHeight || getstylenum (el, "높이");
for (i in _oldcss) {
setstyle (el, _oldcss);
}
반환 {너비 : _width, 높이 : _height};
}
var dd = document.getElementById ( "test_display_block");
Alert (GetSize (DD) .Height);
document.getElementById ( "test_display_click"). onclick = function () {
dd.style.display = "block";
document.getElementById ( "test_display_none"). style.display = "block";
}
ALERT ($ ( "#test_display_none"). height ());
</스크립트>
</body>
</html>
외부 주제 : 일반적으로 JavaScript 프레임 워크 및 라이브러리는이 방법을 캡슐화했습니다. 예를 들어, JQ는 Heigh () 및 width () 메소드를 직접 사용하여 숨겨진 요소의 크기를 얻을 수 있습니다.