Rumah >hujung hadapan web >tutorial js >Ringkasan mendapatkan fungsi ketinggian dan lebar dalam petua JavaScript_javascript

Ringkasan mendapatkan fungsi ketinggian dan lebar dalam petua JavaScript_javascript

WBOYasal: 2016-05-16 16:34:511391semak imbas

kod html:

Salin kod Kod adalah seperti berikut:

3c30aa6c4c72dd8ead30672a51b803a7 

b79ced7191e183c9d676e36be1b692f6

& Lt; h3 & gt;
             82a5d626104b4f906aa1b7cbbeb4ce9d

                                                f43a931bdd408dcbea2853ddde41031f

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              684271ed9684bde649abda8831d4d355Selamat Hari Kebangsaan 39528cedfa926ea0c01e69ef5b2ea9b0

16b28748ea4df4d9c2150843fecfba68

8adfa8c1ccacbcb84d601203e62b568b

16b28748ea4df4d9c2150843fecfba68

36cc49f0c466276486e50c850b7e4956

css:

Salin kod

Kod adalah seperti berikut:

{ jidar: 0 auto; } .ayah { lebar: 500px; tinggi: 750px;

jidar: 5px merah pepejal;

         terapung: kiri;

}

.nak

{

           lebar: 400px;

           tinggi: 300px;

           jidar: 5px hitam pejal;

​​Margin: 20px;

}

.cucu

{

           lebar: 150px;

           tinggi: 100px;

          jidar: 5px biru pejal;

​​Margin: 20px;

           limpahan: auto;

}

.data

{

           lebar: 600px;

           tinggi: 750px;

           jidar: 5px merah pepejal;

         terapung: kiri;

          jidar-kiri: 15px;

}

js:

Salin kod

Kod adalah seperti berikut:

window.onload = function()

{

​​​​/*Dapatkan objek elemen*/

          var bapa = document.getElementById('bapa');

          var son = document.getElementById('son');

        var cucu = document.getElementById('cucu');

           var data = document.getElementById('data');

​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan saiz tetingkap (berkaitan dengan saiz tetingkap)39528cedfa926ea0c01e69ef5b2ea9b0";

              data.innerHTML = "Lebar kawasan boleh dilihat dokumen.badan: " document.body.clientWidth "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "Document.body visible area height: " document.body.clientHeight "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = "window.innerWidth boleh dilihat lebar kawasan: " window.innerWidth "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = "window.innerHeight boleh dilihat ketinggian kawasan: " window.innerHeight "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "document.documentElement kelihatan lebar kawasan: " document.documentElement.clientWidth "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = "document.documentElement boleh dilihat ketinggian kawasan: " document.documentElement.clientHeight "076402276aae5dbec7f672f8f4e5cc81";

​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan saiz elemen itu sendiri (tidak kira sama ada terdapat bar skrol)39528cedfa926ea0c01e69ef5b2ea9b0";

                data.innerHTML = ".lebar anak sendiri (atribut OffsetWidth, termasuk sempadan kiri dan kanan):" son.offsetWidth "076402276aae5dbec7f672f8f4e5cc81";

                data.innerHTML = ".ketinggian anak sendiri (atribut offsetHeight, termasuk sempadan atas dan bawah):" son.offsetHeight "076402276aae5dbec7f672f8f4e5cc81";

               data.innerHTML = ".lebar visual anak (atribut clientWidth, tidak termasuk sempadan kiri dan kanan):" son.clientWidth "076402276aae5dbec7f672f8f4e5cc81";

               data.innerHTML = ".son height visual (atribut clientHeight, tidak termasuk sempadan atas dan bawah):" son.clientHeight "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan.saiz tatal cucu dan saiz visual39528cedfa926ea0c01e69ef5b2ea9b0";

​​​​​ data.innerHTML = ".lebar tatal cucu (atribut scrollWidth):" grandson.scrollWidth "076402276aae5dbec7f672f8f4e5cc81";

​​​​​ data.innerHTML = ".tinggi tatal cucu (atribut scrollHeight):" grandson.scrollHeight "076402276aae5dbec7f672f8f4e5cc81";

                data.innerHTML = ".lebar visual cucu (atribut clientWidth, tidak termasuk bar skrol menegak dan sempadan):" grandson.clientWidth "076402276aae5dbec7f672f8f4e5cc81";

               data.innerHTML = ".ketinggian visual cucu (atribut clientHeight, tidak termasuk bar skrol mendatar dan sempadan):" grandson.clientHeight "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan saiz .cucu yang digulung (berkaitan dengan kedudukan bar skrol)39528cedfa926ea0c01e69ef5b2ea9b0";

                 data.innerHTML = ".Ketinggian cucu ditatal (atribut tatal atas, bar tatal menegak meluncur ke bawah):" grandson.scrollTop "076402276aae5dbec7f672f8f4e5cc81";

data.innerHTML = ".cucu ditatal ke kiri (atribut skrol Kiri, bar skrol mendatar meluncur ke hujung kanan):" grandson.scrollLeft "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan kedudukan tetingkap penyemak imbas (berkaitan dengan saiz tetingkap)39528cedfa926ea0c01e69ef5b2ea9b0";

          /*

*IE, Chrome, Safari dan Opera semuanya menyediakan sokongan untuk window.screenLeft dan *window.screenTop, tetapi Firxfox tidak menyokong kedua-dua atribut ini;
*Firxfox, Chrome, Safari dan Opera semuanya menyediakan sokongan untuk window.screenX *dan window.screenY, tetapi IE tidak menyokong kedua-dua atribut ini;
*/

        var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;

        var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
              data.innerHTML = "Pada bahagian teks halaman badan (window.screenTop(Y)):" topPos "076402276aae5dbec7f672f8f4e5cc81";

               data.innerHTML = "Sebelah kiri bahagian teks kandungan (window.screenLeft(X)):" leftPos "076402276aae5dbec7f672f8f4e5cc81";

​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan peleraian skrin39528cedfa926ea0c01e69ef5b2ea9b0";

​​​​​ data.innerHTML = "Ketinggian resolusi skrin (window.screen.height):" window.screen.height "076402276aae5dbec7f672f8f4e5cc81";

​​​​​ data.innerHTML = "Lebar peleraian skrin (window.screen.width):" window.screen.width "076402276aae5dbec7f672f8f4e5cc81";

            data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan ketinggian dan lebar skrin yang tersedia39528cedfa926ea0c01e69ef5b2ea9b0";

             data.innerHTML = "Ketinggian resolusi skrin (window.screen.availHeight):" window.screen.availHeight "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "Lebar peleraian skrin (window.screen.availWidth):" window.screen.availWidth "076402276aae5dbec7f672f8f4e5cc81";

             data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan saiz sempadan .bapa39528cedfa926ea0c01e69ef5b2ea9b0";

              data.innerHTML = ".bapa sempadan atas (clientTop):" father.clientTop "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = ".bapa sempadan kiri (klienKiri):", bapa.klienKiri "076402276aae5dbec7f672f8f4e5cc81";

​​​​​ data.innerHTML = "684271ed9684bde649abda8831d4d355Dapatkan jarak dari .son ke sempadan unsur induk (iaitu sempadan yang sepadan dengan unsur induk jidar)39528cedfa926ea0c01e69ef5b2ea9b0";

             data.innerHTML = ".anak ke sempadan atas elemen induk (offsetTop):" son.offsetTop "076402276aae5dbec7f672f8f4e5cc81";

              data.innerHTML = ".son ke tepi kiri unsur induk (offsetLeft):" son.offsetLeft "076402276aae5dbec7f672f8f4e5cc81";

}

ps: Terdapat perbezaan dalam cara pelayar menghuraikan kotak, jadi akan terdapat perbezaan kecil dalam data yang diperoleh di atas. Dilampirkan adalah gambar.

Kod penuh:

<!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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js memantau peristiwa tetikus untuk mengawal bilangan rentetan input dalam kemahiran textarea_javascriptArtikel seterusnya：js memantau peristiwa tetikus untuk mengawal bilangan rentetan input dalam kemahiran textarea_javascript

Artikel berkaitan

Lihat lagi