Comment utiliser les attributs de largeur et de hauteur de la page, de la zone visuelle, de l'écran, etc.

Cette fois, je vais vous montrer comment utiliser les attributs largeur et hauteur de la page, de la zone visible, de l'écran, etc. , et les précautions pour utiliser la largeur et la hauteur attributs de la page, de la zone visible, de l’écran, etc. De quoi s’agit-il ? Voici des cas concrets.

À propos de certains attributs de largeur et de hauteur associés à la page, à la zone visuelle, à l'écran, 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
	);
}

De plus, il existe certains attributs sur la position et la taille de l'élément dom html , comme suit

offsetWidth

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

clientWidth

scrollWidth

offsetHeight

clientHeightscrollHeight

offsetLeft

clientLeft

scrollLeft

offsetTop

clientTop

scrollTop

1. clientHeight et clientWidth sont utilisés pour décrire la taille intérieure de l'élément, qui fait référence à la taille du contenu de l'élément + marge intérieure , à l'exclusion de la bordure (inclut en fait sous IE), Marge , partie barre de défilement

2 offsetHeight et offsetWidth sont utilisés pour décrire la taille extérieure de l'élément, qui fait référence au contenu de l'élément + marge intérieure + bordure, à l'exclusion. la partie marge extérieure et barre de défilement

3. clientTop et clientLeft renvoient la distance horizontale et verticale entre le bord du remplissage et le bord extérieur de la bordure, c'est-à-dire la largeur de la bordure gauche et supérieure

4. offsetTop et offsetLeft représentent le coin supérieur gauche de l'élément (Border bord extérieur ) et la distance par rapport au coin supérieur gauche du conteneur parent positionné (objet offsetParent)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des cas d'utilisation H5+Canvas

Comment utiliser la méthode javascript Date Format

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!