Code html:
La copie de code est la suivante:
<body>
<div id = "père">
<h3> C'est l'élément parent, la résolution de l'écran est 1366 * 768 </h3>
<div id = "Son">
<h3> Ceci est un élément enfant, je vous souhaite à tous une bonne journée nationale </h3>
<div id = "petit-fils">
<h3> C'est l'élément de petit-fils, je vous souhaite à tous une bonne journée nationale </h3>
<h3> mon blog: www.vevb.com </h3>
<h3> Group des amateurs de programmes QQ: </h3>
<h3> 259280570 </h3>
<h3> Bienvenue à rejoindre </h3>
<h3> bonne journée nationale </h3>
</div>
</div>
</div>
<div>
<h3> sortie de données </h3>
<div id = "data"> </div>
</div>
</docy>
CSS:
La copie de code est la suivante:
*
{
marge: 0 auto;
}
.père
{
Largeur: 500px;
Hauteur: 750px;
Border: 5px rouge solide;
flottant: à gauche;
}
.fils
{
Largeur: 400px;
hauteur: 300px;
Border: 5px noir solide;
marge: 20px;
}
.petit fils
{
Largeur: 150px;
hauteur: 100px;
Border: 5px bleu massif;
marge: 20px;
débordement: auto;
}
.données
{
Largeur: 600px;
Hauteur: 750px;
Border: 5px rouge solide;
flottant: à gauche;
marge-gauche: 15px;
}
JS:
La copie de code est la suivante:
window.onload = function ()
{
/ * Obtenez l'objet élément * /
var père = document.getElementByid («père»);
var son = document.getElementById ('Son');
var petit-fils = document.getElementById ('gradson');
var data = document.getElementById ('data');
data.innerhtml = "<h3> Obtenez la taille de la fenêtre (liée à la taille de la fenêtre) </h3>";
data.innerhtml + = "Document.Body Visible Area Largeth:" + document.body.clientwidth + "<br/>";
data.innerhtml + = "document.body Hauteur de zone visible:" + document.body.clientHeight + "<br/>";
data.innerhtml + = "window.innerwidth La largeur de zone visible:" + window.innerwidth + "<br/>";
data.innerhtml + = "window.innerHeight Zone visible Hauteur:" + window.innerheight + "<br/>";
data.innerhtml + = "document.DocumentElement Visible Area Largeth:" + document.DocumentElement.ClientWidth + "<br/>";
data.innerhtml + = "Document.DocumentElement Visible Zone Height:" + document.DocumentElement.ClientHeight + "<br/>";
data.innerhtml + = "<h3> obtient la taille propre de l'élément (non liée à la question de savoir s'il y a une barre de défilement) </h3>";
data.innerhtml + = ".son's propre largeur (propriété OffsetWidth, y compris les bordures gauche et droite):" + Son.offsetWidth + "<br/>";
data.innerhtml + = ".son's propre hauteur (propriété offSetheight, y compris les bordures supérieures et inférieures):" + fils.offsetheight + "<br/>";
data.innerhtml + = ".son Largeur visuelle (attribut ClientWidth, excluant les bordures gauche et droite):" + Son.ClientWidth + "<br/>";
data.innerhtml + = ".son Hauteur visuelle (propriété ClientHeight, à l'exclusion des bordures supérieures et inférieures):" + Son.ClientHeight + "<br/>";
data.innerhtml + = "<h3> obtient la taille de défilement et la taille visuelle </h3>";
data.innerhtml + = ".gradson largeur de défilement (propriété ScrollWidth):" + gradson.scrollwidth + "<br/>";
data.innerhtml + = ".gradson Hauteur de défilement (propriété ScrollHeight):" + gradson.scrollHeight + "<br/>";
data.innerhtml + = ".gradson largeur visuelle (propriété ClientWidth, excluant les barres de défilement verticales et la bordure):" + gradson.clientwidth + "<br/>";
data.innerhtml + = ".gradson hauteur visuelle (propriété ClientHeight, à l'exclusion des barres de défilement horizontales et de la bordure):" + gradson.clientheight + "<br/>";
data.innerhtml + = "<h3> obtient la taille du .gradson roulé (lié à la position de la barre de défilement) </h3>";
data.innerhtml + = ".gradson est enroulé haut (propriété ScrollTop, diapositives verticales de barre de défilement vers le bas):" + gradson.scrolltop + "<br/>";
data.innerhtml + = ".gradson est déployé sur la gauche (propriété Scrollleft, glissades de barre de défilement horizontale à l'extrémité la plus à droite):" + gradson.scrollleft + "<br/>";
data.innerhtml + = "<h3> Obtenez l'emplacement de la fenêtre du navigateur (lié à la taille de la fenêtre) </h3>";
/ *
* IE, Chrome, Safari et Opera fournissent tous une prise en charge de Window.ScreenLeft et * Window.ScreentOP, mais FirXfox ne prend pas en charge ces deux propriétés;
* FirXfox, Chrome, Safari et Opera fournissent tous une prise en charge de Window.Screenx * et Window.Screeny, mais IE ne prend pas en charge ces deux propriétés;
* /
var LeftPos = (typeof window.screenleft == 'nombre')? window.screenleft: window.screenx;
var toppos = (typeof window.screentop == 'nombre')? window.screentop: window.screeny;
data.innerhtml + = "sur la partie du corps de la page du corps (fenêtre.screentop (y)):" + toppos + "<br/>";
data.innerhtml + = "Page Web du corps Texte du corps gauche (Window.ScreenLeft (x)):" + LeftPos + "<br/>";
data.innerhtml + = "<h3> Obtenez une résolution d'écran </h3>";
data.innerhtml + = "Résolution de haut écran (fenêtre.screen.height):" + window.screen.height + "<br/>";
data.innerhtml + = "Largeur de la résolution d'écran (fenêtre.screen.width):" + window.screen.width + "<br/>";
data.innerhtml + = "<h3> Obtenez la hauteur et la largeur disponibles pour l'écran </h3>";
data.innerhtml + = "Résolution de haut écran (Window.Screen.AcailHeight):" + Window.Screen.AvailHeight + "<br/>";
data.innerhtml + = "Largeur de la résolution d'écran (window.screen.availwidth):" + window.screen.availwidth + "<br/>";
data.innerhtml + = "<h3> Obtenez la taille de la bordure de .fère </h3>";
data.innerhtml + = ".father Border (ClientTop):" + père.clienttop + "<br/>";
data.innerhtml + = ".father Border (Clientleft):" + père.clientleft + "<br/>";
data.innerhtml + = "<h3> obtient la distance de .son à la limite de l'élément parent (c'est-à-dire la bordure correspondant à la marge + élément parent) </h3>";
data.innerhtml + = ".son à la limite supérieure de l'élément parent (OffsetTop):" + Son.offsettop + "<br/>";
data.innerhtml + = ".son à la limite gauche de l'élément parent (offsetleft):" + Son.offsetleft + "<br/>";
}
PS: Il existe des différences dans l'analyse du navigateur de la boîte, il y aura donc de petites différences dans les données obtenues ci-dessus. Une image attachée.
Code complet:
<! Doctype html public "- // w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <a-then> <meta chasset = "utf-8" /> <itle> test </ title> Type = "Text / CSS"> * {marge: 0 Auto;}. Père {largeur: 500px; hauteur: 750px; bordure: 5px Red solide; Float: Left;}. Son {Width: 400px; Height: 300px; Border: 5px Solid Black; margin: 20px;}. bleu; marge: 20px; débordement: auto;}. Données {largeur: 600px; hauteur: 750px; bordure: 5px solide rouge; float: gauche; marge-left: 15px;} </ style> <script type = "text / javascrip Document.getElementById ('Son'); var Grandon = Document.GetElementById ('GradSon'); var data = document.getElementById ('Data'); data.innerhtml = "<h3> Obtenez la taille de la fenêtre (liée à la taille de la fenêtre) </h3>"; data.innerhtml + = "Document Visible Area Width: "+ document.body.clientwidth +" <br/> "; data.innerhtml + =" Document.Body Hauteur de zone visible: "+ document.body.clientheight +" <br/> "; data.innerhtml + =" window.innerwidth Visible Area Width: "+ window.innerwidth +" <br/> "; Data.InnerhtmltmlL + =" Feedleight. hauteur: "+ window.innerheight +" <br/> "; data.innerhtml + =" document.DocumentElement visible de la zone de zone: "+ document.documentElement.clientWidth +" <br/> "; data.innerhtml + =" document.DocumentElement la zone de visible: "+ document.DocumentHt.clientHeight +"; + = "<h3> Obtenez la taille propre de l'élément (non lié à la question de savoir s'il y a une barre de défilement) </h3>"; data.innerhtml + = ".son's propre (attribut OffsetWidth, y compris les frontières gauche et droite):" + son.offsetwidth + "<br/>"; data.innerhtml + = ". "+ Son.offsetheight +" <br/> "; data.innerhtml + =" .Son's Visible Width (ClientWidth Attribut, Sans inclure les frontières gauche et droite): "+ Son.ClientWidth +" <br/> "; Data.Innerhtml + =" .son Visible hauteur (ClientHeight Property, Exclusion Upper and inférieur Borders): "+ Son.ClientHeight +" <br/> "; data.innerhtml + =" <h3> Get .gradson Scroll Taille et taille visible </h3> "; Data.Innerhtml + =" .gradson Scroll Width (ScrollWidth Property): "+ GradSon.ScrollWidth +" <br/> "; Data.InnerhthtmlLL +". propriété): "+ gradson.scrollheight +" <br/> "; data.innerhtml + =" .grandson width visual width (clientwidth, excluant les barres de défilement verticales et borde "+ Grandon.ClientHeight +" <br/> "; data.innerhtml + =" <h3> Obtenez la taille de .Grandson en cours de déploiement (lié à la position de la barre de défilement) </h3> "; data.innerhtml + =" .grandson est enroulé haut (propriété ScrollTop, barre de barre de parasites verticale vers le bas): "+ petit-fils.scrolltop +" <br/> "; data.innerhtml + =" .Grandson est déployé à gauche (propriété Scrollleft, horizontal barre de barre de défilement vers la droite): "+ Grandson.Scrollleft +" <br/> "; Data.innerhtml + =" <h3> Recevez la position de la fenêtre du navigateur (raconté à la fenêtre liée à la fenêtre liée (raconté à la fenêtre liée (raconté à la fenêtre liée à la fenêtre (H3> (H3> Position (raconté à la fenêtre liée à la fenêtre liée à la fenêtre (raconté à la fenêtre (H3>. taille) </h3> "; / ** IE, Chrome, Safari, Opera fournissent tous une prise en charge de Window.ScreenLeft et * Window.ScreentOP, mais FirXfox ne prend pas en charge ces deux propriétés; * FirXfox, Chrome, Safari, Opera fournissent tous deux la prise en charge de Window.Screenx * et Window.Screeny, mais IE ne prend pas en charge ces deux propriétés; * / var LeftPos = (typeof window.screenleft == 'nombre')? window.screenleft: window.screenx; var toppos = (typeof window.screentop == 'nombre')? window.screentop: window.screeny; data.innerhtml + = "dans la partie corporelle de la page Web (fenêtre. Toppos + "<br/>"; data.innerhtml + = "Body Web Page Texte du corps Body Part Left (Window.Screenleft (x)):" + LeftPos + "<br/>"; data.innerhtml + = "<h3> Obtenir la résolution d'écran </ h3>"; data.innerhtml + = "High of Screen Resolution (Windows.Screen.height):" + window.screen.height + "<br/>"; data.innerhtml + = "largeur de la résolution de l'écran (window.screen.width):" + window.screen.width + "<br/>"; data.innerhtml + = "<h3> Obtenir l'écran disponible hauteur </h3>"; data.innerhtml + = "La résolution de l'écran Haute (window.screen.availHeight): "+ window.screen.availHeight +" <br/> "; data.innerhtml + =" width de la résolution d'écran (window.screen.availwidth): "+ window.screen.availwidth +" <br/> "; data.innerhtml + =" <h3> .father </h3> "; data.innerhtml + =" .father supérieur border (clienttop): "+ père.clienttop +" <br/> "; data.innerhtml + =".. est, la bordure correspondant à la marge + élément parent) </h3> "; data.innerhtml + =" .son à la limite supérieure de l'élément parent (offsetop): "+ Son.offsettop +" <br/> "; data.innerhtml + =" .son à la limite gauche de l'élément parent (offsetleft): "+ Son.offsetleft + "<br/>";} </ script> </-head> <body> <div id = "père"> <h3> Ceci est l'élément parent, la résolution de l'écran est 1366 * 768 </h3> <div id = "Son"> <h3> C'est un élément enfant, je vous souhaite un élément national heureux </h3> <div id = " Jour </h3> <h3> Mon blog: www.vevb.com </h3> <h3> Program Lover QQ Group: </h3> <h3> 259280570 </h3> <h3> Bienvenue à rejoindre </h3> <h3> Happy National Day </h3> </v> </v> <v> <h3> SORTIE DE DONNÉES </H3> </v> </v> <v> <h3> id = "data"> </ div> </div> </ody> </html>