HTML 코드 :
코드 사본은 다음과 같습니다.
<body>
<div id = "아버지">
<H3> 이것은 부모 요소이며 화면 해상도는 1366*768 </h3>입니다.
<div id = "son">
<H3> 이것은 어린이 요소입니다. 여러분 모두 행복한 전국의 날을 기원합니다 </h3>
<div id = "손자">
<H3> 이것은 손자의 요소입니다. 여러분 모두가 행복한 전국의 날을 기원합니다 </h3>
<H3> 내 블로그 : www.vevb.com </h3>
<H3> 프로그램 애호가 QQ 그룹 : </h3>
<H3> 259280570 </h3>
<H3> 가입에 오신 것을 환영합니다 </h3>
<H3> 행복한 전국의 날 </h3>
</div>
</div>
</div>
<div>
<H3> 데이터 출력 </h3>
<div id = "data"> </div>
</div>
</body>
CSS :
코드 사본은 다음과 같습니다.
*
{
여백 : 0 Auto;
}
.아버지
{
너비 : 500px;
높이 : 750px;
테두리 : 5px 솔리드 레드;
플로트 : 왼쪽;
}
.아들
{
너비 : 400px;
높이 : 300px;
국경 : 5px 솔리드 블랙;
마진 : 20px;
}
.손자
{
너비 : 150px;
높이 : 100px;
테두리 : 5px 단단한 블루;
마진 : 20px;
오버플로 : 자동;
}
.데이터
{
너비 : 600px;
높이 : 750px;
테두리 : 5px 솔리드 레드;
플로트 : 왼쪽;
마진 왼쪽 : 15px;
}
JS :
코드 사본은 다음과 같습니다.
Window.onload = function ()
{
/*요소 개체 얻기*/
var 아버지 = document.getElementById ( '아버지');
var son = document.getElementById ( 'son');
var 손자 = document.getElementById ( 'Gradson');
var data = document.getElementById ( 'data');
data.innerhtml = "<h3> 창 크기를 가져옵니다 (창 크기와 관련) </h3>";
data.innerhtml+= "document.bodicle 가시 영역 너비 :"+document.body.clientWidth+"<br/>";
data.innerhtml+= "document.bodicle 가시 영역 높이 :"+document.body.clientHeight+"<br/>";
data.innerhtml+= "window.innerWidth 가시 영역 너비 :"+window.innerWidth+"<br/>";
data.innerhtml+= "window.innerheight 가시 영역 높이 :"+window.innerheight+"<br/>";
data.innerhtml+= "document.documentElement 가시 영역 너비 :"+document.documentElement.clientWidth+"<br/>";
data.innerhtml+= "document.documentElement 가시 영역 높이 :"+document.documentElement.clientHeight+"<br/>";
data.innerhtml += "<h3> 요소의 크기를 가져옵니다 (스크롤 막대가 있는지 여부와 관련이 없습니다) </h3>";
data.innerhtml+= ".son의 너비 (왼쪽 및 오른쪽 경계를 포함한 Offsetwidth 속성) :"+son.offsetwidth+"<br/>";
data.innerhtml+= ".son의 높이 (상부 및 하단 경계를 포함한 오프 스테 오이트 속성) :"+son.offsetheight+"<br/>";
data.innerhtml+= ".son Visual Width (왼쪽 및 오른쪽 경계 제외, ClientWidth 속성) :"+son.clientWidth+"<br/>";
data.innerhtml+= ".son Visual Height (위와 아래쪽 경계를 제외한 클라이언트 속성) :"+son.clientHeight+"<br/>";
data.innerhtml += "<h3> gets.gradson 스크롤 크기 및 시각적 크기 </h3>";
data.innerhtml+= ".gradson 스크롤 너비 (scrollwidth 속성) :"+gradson.scrollwidth+"<br/>";
data.innerhtml+= ".gradson 스크롤 높이 (ScrollHeight 속성) :"+Gradson.scrollHeight+"<br/>";
data.innerhtml+= ".gradson Visual Width (ClientWidth 속성, 수직 스크롤 막대 및 테두리 제외) :"+Gradson.ClientWidth+"<br/";
data.innerhtml+= ".gradson Visual Height (수평 스크롤 막대 및 테두리 제외) :"+Gradson.ClientHeight+"<br/>";
data.innerhtml += "<h3> 롤링 된 .gradson의 크기를 가져옵니다 (스크롤 막대의 위치와 관련) </h3>";
data.innerhtml+= ". gradson이 높게 롤오트로 나왔습니다 (Scrolltop 속성, 수직 스크롤 막대 슬라이드가 바닥으로) :"+Gradson.scrolltop+"<br/>";
data.innerhtml+= ". gradson은 왼쪽에서 롤링됩니다 (Scrollleft 속성, 수평 스크롤 막대는 가장 오른쪽 끝에 미끄러 져 슬라이드) :"+Gradson.scrollleft+"<br/>";
data.innerhtml += "<h3> 브라우저 창 위치를 가져옵니다 (창 크기와 관련) </h3>";
/*
*IE, Chrome, Safari 및 Opera는 모두 Window.screenleft 및 *Window.screentop을 지원하지만 FirxFox는이 두 속성을 지원하지 않습니다.
* FirxFox, Chrome, Safari 및 Opera는 모두 Window.screenx * 및 Window.screeny를 지원하지만 즉,이 두 속성을 지원하지는 않습니다.
*/
var leftpos = (typeof swooin
var toppos = (typeof window.screentop == 'number')? wind
Data.innerhtml+= "본문 페이지 본문 부품 (Window.screentop (y)) :"+toppos+"<br/>";
data.innerhtml+= "Body Web Page 본문 텍스트 왼쪽 (Window.screenLeft (x)) :"+leftpos+"<br/>";
data.innerhtml += "<h3> 화면 해상도 </h3>";
data.innerhtml+= "높은 화면 해상도 (wind
data.innerhtml+= "화면 해상도 너비 (Window.screen.width) :"+window.screen.width+"<br/>";
data.innerhtml += "<h3> 스크린에 사용할 수있는 높이와 너비를 얻습니다 </h3>";
data.innerhtml+= "높은 화면 해상도 (window.screen.availheight) :"+wind
data.innerhtml+= "화면 해상도의 너비 (Window.screen.availwidth) :"+window.screen.availwidth+"<br/>";
data.innerhtml += "<h3> .father </h3>의 경계 크기를 얻습니다.";
data.innerhtml+= ".father 상부 테두리 (clientTop) :"+rustry.clientTop+"<br/>";
data.innerhtml+= ".father 왼쪽 테두리 (ClientLeft) :"+rustry.clientleft+"<br/>";
data.innerhtml + = "<h3> 부모 요소의 .SON에서 경계까지의 거리를 가져옵니다 (즉, 마진 + 부모 요소에 해당하는 테두리) </h3>";
data.innerhtml+= ".son 부모 요소의 상단 경계 (offsetTop) :"+son.offsetTop+"<br/>";
data.innerhtml+= ".son 부모 요소의 왼쪽 경계 (offsetleft) :"+son.offsetleft+"<br/>";
}
추신 : 브라우저의 상자 분석에는 차이가 있으므로 위에서 얻은 데이터에는 작은 차이가 있습니다. 첨부 된 사진.
완전한 코드 :
<! docType html public "-// w3c // dtd html 4.01 전환 // en" "http://www.w.w3.org/tr/html4/loose.dtd"> <html> <head> <meta charset = "utf-8"/> <test> <style> <스타일. type = "text/css">*{margin : 0 auto;}. 아버지 {너비 : 500px; 높이 : 750px; 경계 : 5px solid red; float : left;}. 아들 {너비 : 400px; 높이 : 300px; 테두리 : 5px 단단한 검은 색; 마진;}. blue;margin: 20px;overflow: auto;}.data{width: 600px;height: 750px;border: 5px solid red;float: left;margin-left: 15px;}</style><script type="text/javascript">window.onload = function(){/*get element object*/var father = document.getElementById('father');var son = document.getElementById ( 'son'); var Grandson = document.getElementById ( 'Gradson'); var data = document.getElementById ( 'data'); data.innerhtml = "<h3> 창 크기 가져 오기 (창 크기와 관련) </h3>"; data.innerhtml += "bodiet. "+document.body.clientWidth+"<br/> "; data.innerHtml+="document.body 보이시 볼 영역 높이 : "+document.body.clientHeight+"<br/> "; data.innerHtml+="window.innerWidth Visive AREA Visible area windy : "+window.innerWidth+"<br visitic. " 영역 높이 : "+swoold.innerheight+"<br/> "; data.innerhtml+="document.documentElement 가시적 영역 너비 : "+document.documentElement.clientWidth+"<br/> "; data.innerhtml+="document.documentElement Visible Height : " +document.documentElement.clientHeight +"<br/> "; data.innerhtml +="<h3> 요소의 크기를 가져옵니다 (스크롤 막대가 있는지 여부와 관련이 없습니다) </h3> "; data.innerhtml +=".SON의 자신의 너비 (왼쪽 및 오른쪽 경계 포함) : "+son.offsetwidth+"<br/> "; data.innerhtml+=".Son의 높이 (상단 및 하부 국경을 포함한 오프 스테이트 속성) : "+son.offsetheight+"<br/> "; innerhtml+=".Son의 Visible Width (clientwidth 속성, 남은 및 오른쪽 국경은 포함하지 않음). "+son.clientWidth+"<br/> "; data.innerhtml+=".son visible Heigh (위와 아래쪽 경계 제외) : "+son.clientheight+"<br/> "; innerhtml+="<h3> gradson scize and visible size </h3> "; innerhtml+=" 너비 (scrollwidth 속성) : "+gradson.scrollwidth+"<br/> "; data.innerhtml+=".gradson scroll height (scrollheight property) : "+gradson.scrollheight+"<br/> "; data.innerhtml+=".grandson width (clientwidth attribute, vertical scroldson and) : "+Grandson.clientWidth+"<br/> "; data.innerhtml+=".Grandson Visual Height (ClientHeight 속성, 수평 스크롤 막대 및 국경을 제외하고) : "+Grandson.ClientHeight+"<br/> "; data.innerhtml+="<h3> 크기가 롤링되고 있습니다. bar) </h3> "; data.innerhtml +=".Grandson이 높게 출시되었습니다 (스크롤 탑 속성, 수직 스크롤 막대 슬라이드는 바닥으로). "+Grandson.scrollleft+"<br/> "; data.innerhtml+="<h3> 브라우저 창 위치를 얻습니다 (창 크기와 관련) </h3> ";/** 즉, 크롬, 사파리, 오페라는 모두 창에 대한 지원을 제공하지만 Screenleft and*screentop, firxfox는이 두 가지 특성을 지원하지 않습니다. * FirxFox, Chrome, Safari, Opera는 Window.screenx * 및 Window.screeny를 지원하지만 즉,이 두 가지 속성을 지원하지는 않습니다. */var leftpos = (swindow.screenleft == 'number')? window.screenLeft : wind Toppos+"<br/>"; data.innerhtml+= "바디 웹 페이지 본문 텍스트 부품 왼쪽 (wind Window.screen.height +"<br/>"; data.innerhtml += "화면 해상도의 너비 (window.screen.width) :" +wind "+Window.screen.availHeight+"<br/> "; data.innerhtml+="화면 해상도의 너비 (window.screen.availwidth) : "+wind (ClientTop) : "+rashin.clientTop+"<br/> "; data.innerhtml+=".father 왼쪽 테두리 (ClientLeft) : "+rashine.clientleft+"<br/ ""; data.innerhtml+= "<h3> 부모 요소의 경계까지의 거리를 얻습니다. 요소) </h3> "; data.innerhtml+=".Son 부모 요소의 상단 경계 (OffsetTop) : "+son.OffSetTop+"<br/> "; data.innerHtml+=".son. ID = "아버지"> <h3> 이것은 부모 요소이며, 화면 해상도는 1366*768 </h3> <div id = "son"> <h3> 이건 어린이 요소입니다. 나는 당신에게 행복한 전국의 날을 기원합니다 </h3> <div id = "grandson"> <h3> 이것은 행복한 전국의 날을 기원합니다 </h3> <h3> 내 블로그 : : 내 블로그 : : www.vevb.com </h3> <h3> 프로그램 애호가 QQ Group : </h3> <h3> 259280570 </h3> <h3> 가입에 오신 것을 환영합니다 </h3> <h3> Happy National Day </h3> </div> </div> <div> <h3> 데이터 출력 </h3> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>. </html>