> 웹 프론트엔드 > H5 튜토리얼 > 페이지, 시각적 영역, 화면 등의 너비 및 높이 속성을 조작하는 방법

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

php中世界最好的语言
풀어 주다: 2018-06-04 11:50:50
원래의
2140명이 탐색했습니다.

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

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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿