>  기사  >  웹 프론트엔드  >  JavaScript_javascript 팁에서 높이 및 너비 함수 가져오기 요약

JavaScript_javascript 팁에서 높이 및 너비 함수 가져오기 요약

WBOY
WBOY원래의
2016-05-16 16:34:511387검색

html 코드:

코드 복사 코드는 다음과 같습니다.


23d618aaf832ccd0dd153042861ceab8
& Lt; h3 & gt; 이것은 상위 요소이며 화면 해상도는 1366*768입니다.
           82a5d626104b4f906aa1b7cbbeb4ce9d
& Lt; h3 & gt; 어린이 요소입니다. 모두 행복한 국경일을 보내세요 & lt;/h3 & gt;                                              b748737d968e7cd2801e0e0566ce97c3
> >                          gt;
& Lt; h3 & gt; 프로그램을 사랑하는 QQ 그룹: fe2aa4c9497613706d189fad2162e088국경일 축하합니다39528cedfa926ea0c01e69ef5b2ea9b0
~ > 16b28748ea4df4d9c2150843fecfba68
8adfa8c1ccacbcb84d601203e62b568b
>                              ~                         -                                   16b28748ea4df4d9c2150843fecfba68
7539a5d50064e8aaf214612c26dad1d3



css:




코드 복사

코드는 다음과 같습니다.

* {           여백: 0 자동; } .아버지 {             너비: 500px;
           높이: 750px;
           테두리: 5px 빨간색 실선;
         부동: 왼쪽;
}
.son
{
           너비: 400px;
           높이: 300px;
           테두리: 5px 검정색,
​​​​여백: 20px;
}
.손자
{
           너비: 150px;
           높이: 100px;
          테두리: 5px 파란색 단색;
​​​​여백: 20px;
           오버플로: 자동;
}
.데이터
{
           너비: 600px;
           높이: 750px;
           테두리: 5px 빨간색 실선;
         부동: 왼쪽;
          왼쪽 여백: 15px;
}




js:




코드 복사

코드는 다음과 같습니다.


window.onload = 함수()
{
​​​​/*요소 객체 가져오기*/
           var father = document.getElementById('father');
           var son = document.getElementById('son');
        var grandson = document.getElementById('grandson');
        var data = document.getElementById('data');
​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355창 크기 가져오기(창 크기 관련)39528cedfa926ea0c01e69ef5b2ea9b0";
              data.innerHTML = "Document.body 가시 영역 너비: " document.body.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
             data.innerHTML = "Document.body 가시 영역 높이: " document.body.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = "window.innerWidth 가시 영역 너비: " window.innerWidth "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = "window.innerHeight 가시 영역 높이: " window.innerHeight "076402276aae5dbec7f672f8f4e5cc81";
             data.innerHTML = "document.documentElement 표시 영역 너비: " document.documentElement.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = "document.documentElement 표시 영역 높이: " document.documentElement.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355요소 자체의 크기 가져오기(스크롤 막대 유무에 관계없이)39528cedfa926ea0c01e69ef5b2ea9b0";
                data.innerHTML = ".son의 자체 너비(왼쪽 및 오른쪽 테두리를 포함한 offsetWidth 속성):" son.offsetWidth "076402276aae5dbec7f672f8f4e5cc81";
                data.innerHTML = ".son 자신의 높이(상하 경계선을 포함한 offsetHeight 속성):" son.offsetHeight "076402276aae5dbec7f672f8f4e5cc81";
                data.innerHTML = ".son 시각적 너비(clientWidth 속성, 왼쪽 및 오른쪽 테두리 제외):" son.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
               data.innerHTML = ".son 시각적 높이(clientHeight 속성, 위쪽 및 아래쪽 테두리 제외):" son.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = "684271ed9684bde649abda8831d4d355Get.grandson 스크롤 크기 및 시각적 크기39528cedfa926ea0c01e69ef5b2ea9b0";
​​​​​ data.innerHTML = ".grandson 스크롤 너비(scrollWidth 속성):" grandson.scrollWidth "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = ".grandson 스크롤 높이(scrollHeight 속성):" grandson.scrollHeight "076402276aae5dbec7f672f8f4e5cc81";
                data.innerHTML = ".grandson 시각적 너비(clientWidth 속성, 수직 스크롤 막대 및 테두리 제외):" grandson.clientWidth "076402276aae5dbec7f672f8f4e5cc81";
               data.innerHTML = ".grandson 시각적 높이(clientHeight 속성, 가로 스크롤 막대 및 테두리 제외):" grandson.clientHeight "076402276aae5dbec7f672f8f4e5cc81";
             data.innerHTML = "684271ed9684bde649abda8831d4d355롤업되는 .grandson의 크기를 가져옵니다(스크롤 막대의 위치와 관련)39528cedfa926ea0c01e69ef5b2ea9b0";
                 data.innerHTML = ".손자가 스크롤되는 높이(scrollTop 속성, 세로 스크롤 막대가 아래쪽으로 슬라이드됨):" grandson.scrollTop "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = ".grandson이 왼쪽으로 스크롤됩니다(scrollLeft 속성, 가로 스크롤 막대가 맨 오른쪽으로 슬라이드됨):" grandson.scrollLeft "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355브라우저 창 위치 가져오기(창 크기 관련)39528cedfa926ea0c01e69ef5b2ea9b0";
          /*
*IE, Chrome, Safari 및 Opera는 모두 window.screenLeft 및 *window.screenTop을 지원하지만 Firxfox는 이 두 가지 속성을 지원하지 않습니다.
*Firxfox, Chrome, Safari 및 Opera는 모두 window.screenX * 및 window.screenY를 지원하지만 IE는 이 두 가지 속성을 지원하지 않습니다.
*/
        var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
        var topPos = (window.screenTop 유형 == 'number')?window.screenTop:window.screenY;
              data.innerHTML = "본문 페이지 텍스트 부분(window.screenTop(Y)):" topPos "076402276aae5dbec7f672f8f4e5cc81";
               data.innerHTML = "본문 텍스트 부분의 왼쪽(window.screenLeft(X)):" leftPos "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355화면 해상도 가져오기39528cedfa926ea0c01e69ef5b2ea9b0";
​​​​​ data.innerHTML = "화면 해상도 높이(window.screen.height):" window.screen.height "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "화면 해상도 너비(window.screen.width):" window.screen.width "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355사용 가능한 화면 높이와 너비를 가져옵니다39528cedfa926ea0c01e69ef5b2ea9b0";
             data.innerHTML = "화면 해상도 높이(window.screen.availHeight):" window.screen.availHeight "076402276aae5dbec7f672f8f4e5cc81";
​​​​​ data.innerHTML = "화면 해상도 너비(window.screen.availWidth):" window.screen.availWidth "076402276aae5dbec7f672f8f4e5cc81";
data.innerHTML = "684271ed9684bde649abda8831d4d355.father의 테두리 크기를 가져옵니다39528cedfa926ea0c01e69ef5b2ea9b0";
              data.innerHTML = ".father 위쪽 테두리(clientTop):" father.clientTop "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = ".father 왼쪽 테두리(clientLeft):" father.clientLeft "076402276aae5dbec7f672f8f4e5cc81";
                data.innerHTML = "684271ed9684bde649abda8831d4d355 .son에서 상위 요소의 테두리(즉, 여백 상위 요소에 해당하는 테두리)까지의 거리를 가져옵니다39528cedfa926ea0c01e69ef5b2ea9b0";
              data.innerHTML = "상위 요소의 상위 경계에 .son(offsetTop):" son.offsetTop "076402276aae5dbec7f672f8f4e5cc81";
              data.innerHTML = "상위 요소의 왼쪽 가장자리에 .son(offsetLeft):" son.offsetLeft "076402276aae5dbec7f672f8f4e5cc81";
}

ps: 브라우저가 상자를 구문 분석하는 방법에는 차이가 있으므로 위에서 얻은 데이터에는 약간의 차이가 있습니다. 사진이 첨부되어 있습니다.

전체 코드:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta charset="utf-8" /> 
<title>test</title> 
<style type="text/css">
	*
	{
		margin: 0 auto;
	}
	.father
	{
		width: 500px;
		height: 750px;
		border: 5px solid red;
		float: left;
	}
	.son
	{
		width: 400px;
		height: 300px;
		border: 5px solid black;
		margin: 20px;
	}
	.grandson
	{
		width: 150px;
		height: 100px;
		border: 5px solid 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()
	{
		/*获取元素对象*/
		var father = document.getElementById('father');
		var son = document.getElementById('son');
		var grandson = document.getElementById('grandson');
		var data = document.getElementById('data');
		data.innerHTML = "<h3>获取视窗大小(跟窗口大小有关)</h3>";
		data.innerHTML += "document.body可见区域宽: "+document.body.clientWidth+"<br/>";
		data.innerHTML += "document.body可见区域高: "+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自身高度(offsetHeight属性,包括上下边框):"+son.offsetHeight+"<br/>";
		data.innerHTML += ".son可视宽度(clientWidth属性,不包括左右边框):"+son.clientWidth+"<br/>";
		data.innerHTML += ".son可视高度(clientHeight属性,不包括上下边框):"+son.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
		data.innerHTML += ".grandson滚动宽度(scrollWidth属性):"+grandson.scrollWidth+"<br/>";
		data.innerHTML += ".grandson滚动高度(scrollHeight属性):"+grandson.scrollHeight+"<br/>";
		data.innerHTML += ".grandson可视宽度(clientWidth属性,不包括竖直滚动条和border):"+grandson.clientWidth+"<br/>";
		data.innerHTML += ".grandson可视高度(clientHeight属性,不包括水平滚动条和border):"+grandson.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";
		data.innerHTML += ".grandson被卷去的高(scrollTop属性,竖直滚动条滑到最底端):"+grandson.scrollTop+"<br/>";
		data.innerHTML += ".grandson被卷去的左(scrollLeft属性,水平滚动条滑到最右端):"+grandson.scrollLeft+"<br/>";
		data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";
		/*
		*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop,但是Firxfox不支持这个两个属性;
		*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY,但是 IE 不支持这个两个属性;
		*/
		var leftPos = (typeof window.screenLeft == 'number')&#63;window.screenLeft:window.screenX;
		var topPos = (typeof window.screenTop == 'number')&#63;window.screenTop:window.screenY;
		data.innerHTML += "body网页正文部分上(window.screenTop(Y)):"+ topPos+"<br/>";
		data.innerHTML += "body网页正文部分左(window.screenLeft(X)):"+ leftPos+"<br/>";
		data.innerHTML += "<h3>获取屏幕分辨率</h3>";
		data.innerHTML += "屏幕分辨率的高(window.screen.height):"+ window.screen.height+"<br/>";
		data.innerHTML += "屏幕分辨率的宽(window.screen.width):"+ window.screen.width+"<br/>";
		data.innerHTML += "<h3>获取屏幕可用的高宽</h3>";
		data.innerHTML += "屏幕分辨率的高(window.screen.availHeight):"+ window.screen.availHeight+"<br/>";
		data.innerHTML += "屏幕分辨率的宽(window.screen.availWidth):"+ window.screen.availWidth+"<br/>";
		data.innerHTML += "<h3>获取.father的边框大小</h3>";
		data.innerHTML += ".father上边框(clientTop):"+ father.clientTop+"<br/>";
		data.innerHTML += ".father左边框(clientLeft):"+ father.clientLeft+"<br/>";
		data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";
		data.innerHTML += ".son到父元素上边界(offsetTop):"+ son.offsetTop+"<br/>";
		data.innerHTML += ".son到父元素左边界(offsetLeft):"+ son.offsetLeft+"<br/>";
	}
</script>
</head> 
<body> 
	<div class="father" id="father">
		<h3>这是父元素,屏幕分辨率是1366*768</h3>
		<div class="son" id="son">
			<h3>这是子元素,祝大家国庆快乐 </h3>
			<div class="grandson" id="grandson">
				<h3>这是孙子元素,祝大家国庆快乐 </h3>
				<h3>我的博客:www.jb51.net</h3>
				<h3>程序爱好者QQ群:</h3>
				<h3>259280570 </h3>
				<h3>欢迎你加入 </h3>
				<h3>国庆快乐 </h3>
			</div>
		</div>
	</div>
	<div class="data">
		<h3>数据输出</h3>
		<div id="data"></div>
	</div>
</body> 
</html> 
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.