페이지, 시각적 영역, 화면 등의 너비 및 높이 속성을 조작하는 방법

이번에는 페이지, 보기 가능 영역, 화면 등의 너비 및 높이 속성을 조작하는 방법을 보여 드리겠습니다. 페이지, 보기 가능 영역, 화면 등의 너비 및 높이 속성을 조작할 때 주의 사항 은 무엇입니까? . 다음은 실제 사례입니다. 함께 살펴보세요.

페이지, 시각적 영역, 화면 등의 일부 관련 너비 및 높이 속성에 대해.

function size(){
	document.write(
	"屏幕分辨率为："+screen.width+"*"+screen.height
	+"<br />"+
	"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
	+"<br />"+
	"网页可见区域宽："+document.body.clientWidth
	+"<br />"+
	"网页可见区域高："+document.body.clientHeight
	+"<br />"+
	"浏览器窗口宽："+document.documentElement.clientWidth
	+"<br />"+
	"浏览器窗口高："+document.documentElement.clientHeight
	+"<br />"+
	"html所有元素宽："+document.documentElement.offsetWidth
	+"<br />"+
	"html所有元素高："+document.documentElement.offsetHeight
	+"<br />"+
	"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth 
	+"<br />"+
	"网页可见区域高(包括边线的宽)："+document.body.offsetHeight 
	+"<br />"+
	"网页正文全文宽："+document.body.scrollWidth
	+"<br />"+
	"网页正文全文高："+document.body.scrollHeight
	+"<br />"+
	"网页被卷去的高："+document.body.scrollTop
	+"<br />"+
	"网页被卷去的左："+document.body.scrollLeft
	+"<br />"+
	"网页正文部分上："+window.screenTop
	+"<br />"+
	"网页正文部分左："+window.screenLeft
	+"<br />"+
	"屏幕分辨率的高："+window.screen.height
	+"<br />"+
	"屏幕分辨率的宽："+window.screen.width
	+"<br />"+
	"屏幕可用工作区高度："+window.screen.availHeight
	+"<br />"+
	"屏幕可用工作区宽度："+window.screen.availWidth
	);
}

또한 다음과 같이 html dom 요소의 위치 및 크기에 대한 일부 속성이 있습니다

1. clientHeight 및 clientWidth는 요소 콘텐츠의 크기 + 내부 여백 , 테두리 제외(실제로는 IE 아래의 포함), 외부 여백 을 나타내는 요소의 내부 크기를 설명하는 데 사용됩니다. 스크롤 막대 부분

2. offsetHeight 및 offsetWidth는 요소의 외부 크기를 설명하는 데 사용됩니다. 이는 외부 여백과 스크롤 막대 부분을 제외하고 요소 내용 + 패딩 + 테두리를 참조합니다

3 clientTop 및 clientLeft는 레벨을 반환합니다. 패딩 가장자리와 테두리 외부 가장자리 사이의 거리, 즉 왼쪽 및 위쪽 테두리 너비

4. offsetTop 및 offsetLeft는 요소의 왼쪽 상단 모서리(테두리 외부 가장자리) 사이의 거리를 나타냅니다. 그리고 배치된 상위 컨테이너(offsetParent 개체)의 왼쪽 상단

이 기사의 사례를 읽은 후 해당 방법을 마스터하신 것으로 생각됩니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요. !

추천 도서:

H5+Canvas 사용 사례 자세한 설명

자바스크립트 날짜 형식 방법 사용 방법

offsetWidth	clientWidth	scrollWidth
offsetHeight	clientHeight	scrollHeight
offsetLeft	clientLeft	scrollLeft
offsetTop	clientTop	scrollTop

위 내용은 페이지, 시각적 영역, 화면 등의 너비 및 높이 속성을 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!