Kode HTML:
Salinan kode adalah sebagai berikut:
<body>
<Div id = "Father">
<h3> Ini adalah elemen induk, resolusi layar adalah 1366*768 </h3>
<Div id = "son">
<h3> Ini adalah elemen anak, saya berharap Anda semua hari nasional yang bahagia </h3>
<Div id = "cucu">
<h3> Ini adalah elemen cucu, saya berharap Anda semua hari nasional yang bahagia </h3>
<h3> Blog saya: www.vevb.com </h3>
<h3> Penggemar program QQ Group: </h3>
<h3> 259280570 </h3>
<h3> Selamat datang untuk bergabung dengan </h3>
<h3> Selamat Hari Nasional </h3>
</div>
</div>
</div>
<div>
<h3> output data </h3>
<Div ID = "Data"> </div>
</div>
</body>
CSS:
Salinan kode adalah sebagai berikut:
*
{
margin: 0 otomatis;
}
.ayah
{
Lebar: 500px;
Tinggi: 750px;
Perbatasan: 5px solid red;
float: kiri;
}
.putra
{
Lebar: 400px;
Tinggi: 300px;
Perbatasan: 5px Solid Black;
margin: 20px;
}
.Grandson
{
Lebar: 150px;
Tinggi: 100px;
Perbatasan: 5px Solid Blue;
margin: 20px;
meluap: otomatis;
}
.data
{
Lebar: 600px;
Tinggi: 750px;
Perbatasan: 5px solid red;
float: kiri;
margin-kiri: 15px;
}
JS:
Salinan kode adalah sebagai berikut:
window.onload = function ()
{
/*Dapatkan objek elemen*/
var ayah = document.geteLementById ('ayah');
var son = document.getElementById ('son');
var grandson = document.geteLementById ('gradson');
var data = document.geteLementById ('data');
data.innerHtml = "<h3> Dapatkan ukuran jendela (terkait dengan ukuran jendela) </h3>";
data.innerHtml+= "document.body visible area lebar:"+document.body.clientwidth+"<br/>";
data.innerHtml+= "document.body visible area tinggi:"+document.body.clientHeight+"<br/>";
data.innerHtml+= "window.innerwidth lebar area yang terlihat:"+window.innerwidth+"<br/>";
data.innerHtml+= "window.innerheight Tinggi area yang terlihat:"+window.innerheight+"<br/>";
data.innerHtml+= "Document.DocumentElement Lebar area yang terlihat:"+document.documentelement.clientwidth+"<br/>";
data.innerHtml+= "Document.DocumentElement Tinggi Area Terlihat:"+Document.DocumentElement.ClientHeight+"<br/>";
data.innerHtml += "<h3> Mendapat ukuran elemen sendiri (tidak terkait dengan apakah ada bilah gulir) </h3>";
data.innerHtml+= "Lebar .son sendiri (properti offsetwidth, termasuk perbatasan kiri dan kanan):"+son.offsetWidth+"<br/>";
data.innerHtml+= "tinggi .son sendiri (properti offsetheight, termasuk batas atas dan bawah):"+son.offsetheight+"<br/>";
Data.innerHtml+= ".Son Visual Width (Atribut ClientWidth, tidak termasuk perbatasan kiri dan kanan):"+son.clientWidth+"<br/>";
data.innerHtml+= ".son visual tinggi (properti ClientHeight, tidak termasuk batas atas dan bawah):"+son.clientHeight+"<br/>";
data.innerHtml += "<h3> gets.gradson ukuran gulir dan ukuran visual </h3>";
Data.innerHtml+= ".Gradson Width Scroll (Properti ScrollWidth):"+Gradson.scrollwidth+"<br/>";
data.innerHtml+= ".Gradson Height Gulir (Properti ScrollHeight):"+Gradson.ScrollHeight+"<br/>";
data.innerHtml+= ".gradson lebar visual (properti clientwidth, tidak termasuk bilah gulir vertikal dan perbatasan):"+lulusan.clientwidth+"<br/>";
Data.innerHtml+= ".Gradson Visual Height (Properti ClientHeight, tidak termasuk bilah gulir horizontal dan perbatasan):"+gradson.clientHeight+"<br/>";
data.innerHtml += "<h3> Mendapat ukuran .Gradson yang digulung (terkait dengan posisi bilah gulir) </h3>";
data.innerHtml+= ".gradson digulung tinggi (properti scrolltop, batang gulir vertikal meluncur ke bawah):"+gradson.scrolltop+"<br/>";
data.innerHtml+= ".gradson digulung dari kiri (properti scrollleft, bilah gulir horizontal meluncur ke ujung kanan):"+lulusan.scrollleft+"<br/>";
data.innerHtml += "<h3> Dapatkan lokasi jendela browser (terkait dengan ukuran jendela) </h3>";
/*
*IE, Chrome, Safari, dan Opera semuanya memberikan dukungan untuk window.screenleft dan *window.screentop, tetapi firxfox tidak mendukung kedua properti ini;
* Firxfox, chrome, safari, dan opera semuanya memberikan dukungan untuk window.screenx * dan window.screeny, tetapi IE tidak mendukung kedua properti ini;
*/
var leftpos = (typeof window.screenleft == 'nomor')? window.screenleft: window.screenx;
var toppos = (typeof window.screentop == 'nomor')? window.screentop: window.screeny;
data.innerHtml+= "Pada bagian tubuh body (window.screentop (y)):"+toppos+"<br/>";
Data.innerHtml+= "Teks Web Body Body Text Left (window.screenleft (x)):"+leftpos+"<br/>";
data.innerHtml += "<h3> Dapatkan resolusi layar </h3>";
data.innerHtml+= "Resolusi layar tinggi (window.screen.height):"+window.screen.height+"<br/>";
data.innerHtml+= "Lebar resolusi layar (window.screen.width):"+window.screen.width+"<br/>";
data.innerHtml += "<h3> Dapatkan tinggi dan lebar tersedia untuk layar </h3>";
data.innerHtml+= "Resolusi layar tinggi (window.screen.availheight):"+window.screen.availheight+"<br/>";
data.innerHtml+= "Lebar resolusi layar (window.screen.availwidth):"+window.screen.availwidth+"<br/>";
data.innerHtml += "<h3> Dapatkan ukuran perbatasan. Father </h3>";
data.innerHtml+= ".father Upper Border (clienttop):"+father.clienttop+"<br/>";
data.innerHtml+= ".father border kiri (clientleft):"+father.clientleft+"<br/>";
data.innerHtml + = "<h3> mendapatkan jarak dari .son ke batas elemen induk (yaitu, perbatasan yang sesuai dengan elemen margin + induk) </h3>";
data.innerHtml+= ".son ke batas atas elemen induk (offsettop):"+son.offsettop+"<br/>";
data.innerHtml+= ".son ke batas kiri elemen induk (offsetleft):"+son.offsetleft+"<br/>";
}
PS: Ada perbedaan dalam analisis browser dari kotak, sehingga akan ada perbedaan kecil dalam data yang diperoleh di atas. Gambar terpasang.
Kode Lengkap:
<!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 {lebar: 600px; tinggi: 750px; Border: 5px solid red; float: left; margin-left: 15px;} </style> <script type = "text/javascript"> window.onload = function () {/*get elemen objek*/var bapa = document.getelementbyid (' document.getElementById ('gradson'); var data = document.geteLementById ('data'); data.innerHtml = "<h3> Dapatkan ukuran jendela (terkait dengan ukuran jendela) </h3>"; data.InnerHTML += "document.body visible area lebar:" +document.boDIDTH.IMBODTH +"DOCORY =" document. Tinggi: "+document.body.clientHeight+" <br/> "; data.innerhtml+=" window.innerwidth lebar area yang terlihat: "+window.innerwidth+" <br/> "; data.innerhtml+=" window.innerheight Area yang terlihat. "Document.DocumentElement Lebar area yang terlihat:"+document.documentelement.clientwidth+"<br/>"; data.innerhtml+= "document.documentElement Tinggi area yang terlihat:"+dokumen. bar) </h3> "; Data.innerhtml +=" Lebar .son sendiri (atribut offsetwidth, termasuk perbatasan kiri dan kanan): " +son.offsetWidth +" <br/> "; Data.innerhtml +=" .Son tinggi (atribut OffsetHeight, termasuk Batas atas dan lebih rendah): "+Son.OffsetHeight+" <br/> "; data.innerhtml+=" Lebar terlihat. "+son.clientHeight+" <br/> "; data.innerHtml+=" <h3> dapatkan. Ukuran gulir gradson dan ukuran yang terlihat </h3> "; data.innerHtml+=" .grolan gulir (scrollWidth): "+++lulron." (Properti ScrollHeight): "+Gradson.ScrollHeight+" <br/> "; data.innerhtml+=" .Grandson Visual Width (Atribut ClientWidth, tidak termasuk bilah gulir vertikal dan perbatasan): "+cucu. bilah gulir dan perbatasan): " +cucu. "+Grandson.scrolltop+" <br/> "; data.innerhtml+=" .grandson diluncurkan ke kiri (properti scrollleft, batang gulir horizontal meluncur ke kanan): "+cucu. ukuran) </h3> ";/** yaitu, chrome, safari, opera semuanya memberikan dukungan untuk window.screenleft dan*window.screentop, tetapi firxfox tidak mendukung dua properti ini; * Firxfox, chrome, safari, opera keduanya memberikan dukungan untuk window.screenx * dan window.screeny, tetapi IE tidak mendukung kedua properti ini; */var leftpos = (typeof window.screenleft == 'number')? window.screenleft: window.screenx; var toppos = (typeof window.screentop == 'nomor')? window.screentop: window.screeny; data.innerhtml += "di bagian tubuh dari halaman web. TOPPOS+"<br/>"; data.innerhtml+= "Body Web Page Text Text Bagian Kiri (Window.Screenleft (x)):"+LeftPos+"<br/>"; data.innerhtml+= "<H3> Get Resolution </h3>"; data.innerhtml+= "highcole (highsc.sol (h3.se.sen. window.screen.height +"<br/>"; data.innerhtml += "Lebar resolusi layar (window.screen.width):" +window.screen.width +"<br/>"; data.innerhtml += "<h3> Layar tinggi tersedia tinggi </h3>; data. (window.screen.availheight): "+window.screen.availheight+" <br/> "; data.innerhtml+=" Lebar resolusi layar (window.screen.availwidth): "+window.screen.availwidth+" <br/> "; data.innerhtm .father </h3> "; data.innerHtml+=". Batas atas (clienttop): "+bapak.clienttop+" <br/> "; data.innerhtml+=". Batas kiri (clientleft): "+ayah. adalah, perbatasan yang sesuai dengan margin+elemen induk) </h3> "; data.innerhtml+=" .son ke batas atas elemen induk (offsettop): "+son.offsettop+" <br/> "; data.innerhtml+=" .son ke batas kiri dari elemen induk (offsetleft): ":"+= " son.offsetLeft+"<br/>";}</script></head> <body> <div id="father"><h3>This is the parent element, the screen resolution is 1366*768</h3><div id="son"><h3>This is a child element, I wish you a happy National Day</h3><div id="grandson"><h3>This is a grandson element, I wish you a happy National Day </h3> <h3> Blog saya: www.vevb.com </h3> <h3> Program Lover QQ Group: </h3> <h3> 259280570 </h3> <h3> Selamat datang untuk bergabung dengan </h3> <h3> Happy National Day </h3> </Div> </Div> </h3 <h3> DATA NASIONAL </h3> </Div> </Div> </h3 <h3> DATA NASIONAL </h3> </DIV> </DIV> </H3 <H3> DATA </H3> </DIV> </DIV> <H3> DATA </H3> </DIV> </DIV> <H3> ID = "Data"> </div> </div> </body> </html>