How to operate the width and height attributes of the page, visual area, screen, etc.

This time I will show you how to operate the width and height properties of the page, visual area, and screen , and how to operate the width and height properties of the page, visual area, and screen Precautions What are they? Here are actual cases. Let’s take a look.

About some related width and height attributes of the page, visual area, screen, etc.

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
	);
}

In addition, there are some attributes related to position and size of the html dom element, as follows

1. clientHeight and clientWidth are used to describe the inner size of the element, which refers to the inner margin size of the element content, excluding the border (actually includes under IE), outer edge Distance, scroll bar part

2. offsetHeight and offsetWidth are used to describe the outer size of the element, which refers to the inner margin border of the element content, excluding the outer margin and scroll bar part

3 . clientTop and clientLeft return the horizontal and vertical distance between the edge of the padding and the outer edge of the border, that is, the left and top border width

4. offsetTop and offsetLeft represent the upper left corner of the element (borderOuter edge) and The distance between the upper left corner of the positioned parent container (offsetParent object)

I believe you have mastered the method after reading the case in this article, please pay attention for more exciting things Other related articles on php Chinese website!

Recommended reading:

H5 Canvas use case detailed explanation

How to use the javascript Date Format method

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

The above is the detailed content of How to operate the width and height attributes of the page, visual area, screen, etc.. For more information, please follow other related articles on the PHP Chinese website!