Maison > interface Web > js tutoriel > Résumé de l'obtention des fonctions de hauteur et de largeur dans les astuces JavaScript_javascript

Résumé de l'obtention des fonctions de hauteur et de largeur dans les astuces JavaScript_javascript

WBOY
Libérer: 2016-05-16 16:34:51
original
1409 Les gens l'ont consulté

Code HTML :

Copier le code Le code est le suivant :


& Lt; h3 & gt; Ceci est l'élément parent, la résolution de l'écran est de 1366*768 & lt;/h3 & gt;             

                                                                                                                                                                                                                                                                                

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

259280570                                                      & Lt; h3 & gt; vous souhaite la bienvenue à & lt;/h3 & gt;                                                                                                                                                                                                                                                                            

Bonne fête nationale


                                                                                                                                                                                                             


                                                                                                                                                                                                                                                                                                                                    





css :






Copier le code
Le code est le suivant :

*

{

         marge : 0 auto ;

> .père {             largeur : 500 px ;            hauteur : 750 px ;            bordure : 5 px, rouge uni ;          float : gauche ;
>
.fils
{
           largeur : 400 px ;
           hauteur : 300 px ;
           bordure : 5 px, noir uni ;
​​​​Marge : 20px;
>
.petit-fils
{
           largeur : 150 px ;
           hauteur : 100 px ;
          bordure : 5 px, bleu uni ;
​​​​Marge : 20px;
          débordement : auto ;
>
.data
{
           largeur : 600 px ;
           hauteur : 750 px ;
           bordure : 5 px, rouge uni ;
         float : gauche ;
          marge gauche : 15 px ;
>




js:






Copier le code
Le code est le suivant :


window.onload = fonction()
{
​​​​/*Obtenir l'objet élément*/
          var père = document.getElementById('père');
          var fils = document.getElementById('son');
        var petit-fils = document.getElementById('petit-fils');
           var data = document.getElementById('data');
​​​​​ data.innerHTML = "

Obtenir la taille de la fenêtre (liée à la taille de la fenêtre)

";
              data.innerHTML = "Largeur de la zone visible du document.body : " document.body.clientWidth "
";
             data.innerHTML = "Hauteur de la zone visible du document.body : " document.body.clientHeight "
";
              data.innerHTML = "window.innerWidth largeur de la zone visible : " window.innerWidth "
";
              data.innerHTML = "window.innerHeight hauteur de la zone visible : " window.innerHeight "
";
             data.innerHTML = "document.documentElement largeur de la zone visible : " document.documentElement.clientWidth "
";
              data.innerHTML = "document.documentElement hauteur de la zone visible : " document.documentElement.clientHeight "
";
​​​​​ data.innerHTML = "

Obtenir la taille de l'élément lui-même (qu'il y ait ou non une barre de défilement)

";
                data.innerHTML = "la propre largeur de .son (attribut offsetWidth, y compris les bordures gauche et droite) :" son.offsetWidth "
";
                data.innerHTML = "la propre taille de .son (attribut offsetHeight, y compris les bordures supérieure et inférieure) :" son.offsetHeight "
";
               data.innerHTML = ".son largeur visuelle (attribut clientWidth, à l'exclusion des bordures gauche et droite) :" son.clientWidth "
";
               data.innerHTML = ".son hauteur visuelle (attribut clientHeight, à l'exclusion des bordures supérieure et inférieure) :" son.clientHeight "
";
              data.innerHTML = "

Get.grandson taille de défilement et taille visuelle

";
​​​​​ data.innerHTML = ".grandson scroll width (attribut scrollWidth) :" petitson.scrollWidth "
";
​​​​​ data.innerHTML = ".grandson scroll height (attribut scrollHeight) :" petitson.scrollHeight "
";
                data.innerHTML = "largeur visuelle .grandson (attribut clientWidth, à l'exclusion de la barre de défilement verticale et de la bordure) :" petitson.clientWidth "
";
               data.innerHTML = ".grandson hauteur visuelle (attribut clientHeight, à l'exclusion de la barre de défilement horizontale et de la bordure) :" petitson.clientHeight "
";
             data.innerHTML = "

Obtenir la taille du .grandson en cours de déroulement (liée à la position de la barre de défilement)

";
                 data.innerHTML = ".La hauteur à laquelle le petit-fils défile (attribut scrollTop, la barre de défilement verticale glisse vers le bas) :" petitson.scrollTop "
";
data.innerHTML = ".grandson défile vers la gauche (attribut scrollLeft, la barre de défilement horizontale glisse vers l'extrême droite) :" petitson.scrollLeft "
";
             data.innerHTML = "

Obtenir la position de la fenêtre du navigateur (liée à la taille de la fenêtre)

";
          /*
*IE, Chrome, Safari et Opera prennent tous en charge window.screenLeft et *window.screenTop, mais Firxfox ne prend pas en charge ces deux attributs
; *Firxfox, Chrome, Safari et Opera prennent tous en charge window.screenX *et window.screenY, mais IE ne prend pas en charge ces deux attributs
; */
        var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
        var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
              data.innerHTML = "Sur la partie texte de la page de corps (window.screenTop(Y)) :" topPos "
";
               data.innerHTML = "Le côté gauche de la partie du corps du texte (window.screenLeft(X)) :" leftPos "
";
​​​​​ data.innerHTML = "

Obtenir la résolution d'écran

";
​​​​​ data.innerHTML = "Hauteur de la résolution de l'écran (window.screen.height) :" window.screen.height "
";
​​​​​ data.innerHTML = "Largeur de résolution d'écran (window.screen.width) :" window.screen.width "
";
            data.innerHTML = "

Obtenir la hauteur et la largeur disponibles de l'écran

";
             data.innerHTML = "Hauteur de la résolution de l'écran (window.screen.availHeight) :" window.screen.availHeight "
";
             data.innerHTML = "Largeur de résolution d'écran (window.screen.availWidth) :" window.screen.availWidth "
";
             data.innerHTML = "

Obtenir la taille de la bordure de .father

";
              data.innerHTML = ".bordure supérieure du père (clientTop) :" père.clientTop "
";
              data.innerHTML = ".bordure gauche du père (clientLeft) :" père.clientLeft "
";
​​​​​ data.innerHTML = "

Obtenir la distance entre .son et la bordure de l'élément parent (c'est-à-dire la bordure correspondant à l'élément parent margin)

";
             data.innerHTML = ".son jusqu'à la limite supérieure de l'élément parent (offsetTop) :" son.offsetTop "
";
              data.innerHTML = ".son jusqu'au bord gauche de l'élément parent (offsetLeft) :" son.offsetLeft "
";
>

ps : Il existe des différences dans la façon dont les navigateurs analysent les boîtes, il y aura donc de petites différences dans les données obtenues ci-dessus. Ci-joint une photo.

Code complet :

<!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> 
Copier après la connexion
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal