Código HTML:
La copia del código es la siguiente:
<Body>
<div id = "padre">
<h3> Este es el elemento principal, la resolución de la pantalla es 1366*768 </h3>
<div id = "hijo">
<h3> Este es un elemento infantil, les deseo a todos un feliz día nacional </h3>
<div id = "nieto">
<h3> Este es el elemento de nieto, les deseo a todos un feliz día nacional </h3>
<h3> Mi blog: www.vevb.com </h3>
<h3> Grupo QQ entusiasta del programa: </h3>
<h3> 259280570 </h3>
<h3> Bienvenido a unirse </h3>
<h3> Feliz día nacional </h3>
</div>
</div>
</div>
<div>
<H3> Salida de datos </h3>
<div id = "datos"> </div>
</div>
</body>
CSS:
La copia del código es la siguiente:
*
{
margen: 0 auto;
}
.padre
{
Ancho: 500px;
Altura: 750px;
borde: 5px rojo sólido;
flotante: izquierda;
}
.hijo
{
Ancho: 400px;
Altura: 300px;
borde: 5px negro sólido;
margen: 20px;
}
.nieto
{
Ancho: 150px;
Altura: 100px;
borde: 5px azul sólido;
margen: 20px;
desbordamiento: auto;
}
.datos
{
Ancho: 600px;
Altura: 750px;
borde: 5px rojo sólido;
flotante: izquierda;
margen izquierda: 15px;
}
JS:
La copia del código es la siguiente:
Window.Onload = function ()
{
/*Objeto de elemento GET*/
var padre = document.getElementById ('padre');
var son = document.getElementById ('son');
var nieto = document.getElementById ('Gradson');
var data = document.getElementById ('data');
data.innerhtml = "<h3> Obtenga el tamaño de la ventana (relacionado con el tamaño de la ventana) </h3>";
data.innerhtml+= "Document.Body Visible Área Ancho:"+Document.Body.ClientWidth+"<br/>";
data.innerhtml+= "Document.body Visible Area Altura:"+Document.Body.clientHeight+"<br/>";
data.innerhtml+= "Window.innerWidth Visible Área Ancho:"+Window.innerWidth+"<br/>";
data.innerhtml+= "window.innerheight altura del área visible:"+window.innerheight+"<br/>";
data.innerhtml+= "document.documentelement Visible Área Ancho:"+document.documentelement.clientWidth+"<br/>";
data.innerhtml+= "document.documentelement Visible Area Altura:"+document.documentelement.clientHeight+"<br/>";
data.innerhtml += "<h3> Obtiene el tamaño del elemento (no está relacionado con si hay una barra de desplazamiento) </h3>";
data.innerhtml+= ".Son's Own Width (OffSetWidth Propiedad, incluidas las fronteras izquierda y derecha):"+Son.OffSetWidth+"<br/>";
data.innerhtml+= ".Se de la altura (propiedad Offsetheight, incluidas las fronteras superiores e inferiores):"+son.OffSetheight+"<br/>";
data.innerhtml+= ".son ancho visual (atributo ClientWidth, excluyendo las fronteras izquierda y derecha):"+son.clientwidth+"<br/>";
data.innerhtml+= ".Son Visual Visual Altura (propiedad ClientHeight, excluyendo bordes superiores e inferiores):"+Son.clientHeight+"<br/>";
data.innerhtml += "<h3> gets.gradson tamaño de desplazamiento y tamaño visual </h3>";
data.innerhtml+= ".Gradson Scroll Width (Propiedad ScrollWidth):"+Gradson.ScrollWidth+"<br/>";
data.innerhtml+= ".Gradson Scroll Altura (propiedad ScrollHeight):"+Gradson.scrollheight+"<br/>";
data.innerhtml+= ".Gradson Visual Width (propiedad ClientWidth, excluyendo barras de desplazamiento vertical y borde):"+Gradson.clientWidth+"<br/>";
data.innerhtml+= ".gradson Visual altura (propiedad ClientHeight, excluyendo barras de desplazamiento horizontal y borde):"+Gradson.clientHeight+"<br/>";
data.innerhtml += "<h3> obtiene el tamaño del .gradson enrollado (relacionado con la posición de la barra de desplazamiento) </h3>";
data.innerhtml+= ".Gradson se enrolla alto (propiedad ScrollTop, barra de desplazamiento vertical se desliza hacia la parte inferior):"+Gradson.scrolltop+"<br/>";
data.innerhtml+= ".Gradson se enrolla a la izquierda (propiedad Scrollleft, la barra de desplazamiento horizontal se desliza al final más a la derecha):"+Gradson.scrollleft+"<br/>";
data.innerhtml += "<h3> Obtenga la ubicación de la ventana del navegador (relacionada con el tamaño de la ventana) </h3>";
/*
*IE, Chrome, Safari y Opera brindan soporte para Window.Screenleft y *Window.Screentop, pero FirXFox no admite estas dos propiedades;
* Firxfox, Chrome, Safari y Opera brindan soporte para Window.ScreenX * y Window.Screeny, pero IE no admite estas dos propiedades;
*/
var LeftPos = (typeof window.screenleft == 'number')? Window.screenleft: Window.screenx;
var toppos = (typeof window.screentop == 'number')? Window.screentop: Window.screeny;
data.innerhtml+= "en la página de la página del cuerpo (ventana.screentop (y)):"+toppos+"<br/>";
data.innerhtml+= "Body Web Página Texto del cuerpo Izquierda (Window.Screenleft (x)):"+LeftPos+"<br/>";
data.innerhtml += "<h3> Get Screen Resolution </h3>";
data.innerhtml+= "resolución de pantalla alta (window.screen.height):"+window.screen.height+"<br/>";
data.innerhtml+= "Ancho de la resolución de pantalla (Window.screen.Width):"+Window.screen.Width+"<br/>";
data.innerhtml += "<h3> Obtenga la altura y el ancho disponibles para la pantalla </h3>";
data.innerhtml+= "resolución de pantalla alta (Window.screen.availheight):"+window.screen.availheight+"<br/>";
data.innerhtml+= "Ancho de la resolución de la pantalla (Windows.Screen.availWidth):"+Window.Screen.availWidth+"<br/>";
data.innerhtml += "<h3> Obtenga el tamaño del borde de .Father </h3>";
data.innerhtml+= ".Father Border superior (ClientTop):"+Padre.clientTop+"<br/>";
data.innerhtml+= ".Father Border izquierdo (ClientLeft):"+Padre.clientleft+"<br/>";
data.innerhtml + = "<h3> Obtiene la distancia de .son al límite del elemento principal (es decir, el borde correspondiente al margen + elemento principal) </h3>";
data.innerhtml+= ".son al límite superior del elemento principal (offsettop):"+son.offsettop+"<br/>";
data.innerhtml+= ".Son al límite izquierdo del elemento principal (offsetleft):"+son.offsetleft+"<br/>";
}
PS: Hay diferencias en el análisis del cuadro del navegador, por lo que habrá pequeñas diferencias en los datos obtenidos anteriormente. Una imagen adjunta.
Código completo:
<! Doctype html public "-// w3c // dtd html 4.01 type = "text/css">*{margin: 0 auto;}. padre {ancho: 500px; altura: 750px; borde: 5px sólido rojo; float: izquierda;}. Son {ancho: 400px; altura: 300px; borde: 5px sólido negro; margen: 20px;}. GranS azul; margen: 20px; desbordamiento: auto;}. data {width: 600px; Height: 750px; border: 5px sólido rojo; float: left; margin-left: 15px;} </style> <script type = "text/javaScript"> window.onload = function () {/*get elemento objeto*/var femenino document.getElementById ('son'); var nieto = document.getElementById ('Gradson'); var data = document.getElementById ('data'); data.innerhtml = "<H3> Obtenga el tamaño de la ventana (relacionado con el tamaño de la ventana) </h3>"; data.innerhtml += "Document.Body Visible Width: "+document.body.clientwidth+" <br/> "; data.innerhtml+=" document.body Visible Área altura: "+document.body.clientHeight+" <br/> "; data.innerhtml+=" window.innerwidth visible área width: "+window.innerwidth+" <br/> "; data.innerhttml+" Window. Altura del área: "+Windows.innerheight+" <br/> "; data.innerhtml+=" document.documentelement Visible Área Ancho: "+Document.DocumentElement.clientWidth+" <br/> "; data.innerhtml+=" Document.Documentelement Altura de área visible: altura: " +document.documentelement.clientHeight +" <br/> "; data.innerhtml +=" <h3> Obtenga el tamaño del elemento (no está relacionado con si hay una barra de desplazamiento) </h3> "; data.innerhtml +=" .Son. "+son.offsetWidth+"<br/>";data.innerHTML += ".son's own height (offsetHeight attribute, including upper and lower borders): "+son.offsetHeight+"<br/>";data.innerHTML += ".son's visible width (clientWidth attribute, not including left and right borders): "+son.clientwidth+" <br/> "; data.innerhtml+=" .Son Visible Height (propiedad ClientHeight, excluyendo las bordes superiores e inferiores): "+Son.clientHeight+" <br/> "; data.innerhtml+=" <h3> get .gradson scroll tamaño y tamaño visible </h3> "; data.innerhml+=". Ancho de desplazamiento (propiedad ScrollWidth): "+Gradson.scrollwidth+" <br/> "; data.innerhtml+=" .gradson scroll altura (propiedad scrollheight): "+gradson.scrollHeight+" <br/> "; data.innerhtml+=" .Grandson Visual width (Clientwidth atribute, excluyendo atributo) atribuye y atribuye y borde bars). "+grandson.clientWidth+"<br/>";data.innerHTML += ".grandson visual height (clientHeight attribute, excluding horizontal scroll bars and border): "+grandson.clientHeight+"<br/>";data.innerHTML += "<h3>Get the size of .grandson being rolled out (related to the position of the scroll bar) </h3> "; data.innerhtml +=" .grandson se lanza alto (propiedad de scrollTop, diapositivas de barra de desplazamiento vertical a la parte inferior): " +nieto.scrolltop +" <br/> "; data.innerhtml +=" .grandson está fuera de la izquierda (propiedad de scrollleft, horizontal scroll script a la derecha) "+nieto.scrollleft+" <br/> "; data.innerhtml+=" <h3> Obtenga la posición de la ventana del navegador (relacionada con el tamaño de la ventana) </h3> ";/** es decir, Chrome, Safari, Opera proporciona soporte para la ventana. Ventana y*ventana. * FirXFOX, Chrome, Safari, Opera proporcionan soporte para Window.ScreenX * y Window.screeny, pero IE no admite estas dos propiedades; */var LeftPos = (typeof Window.screenleft == 'Number')? Window.Screenleft: Window.Screenx; var toppos = (typeof window.screentop == 'number')? Window.screentop: Window.Screeny; data.innerhtml += "en la parte del cuerpo de la página web (Window.screentop (y)):" +" toppos+"<br/>"; data.innerhtml+= "Body Web Page Body Text Part (Windows.Screenleft (x)):"+LeftPos+"<br/>"; data.innerhtml+= "<h3> Obtener resolución de pantalla </h3>"; data.innerhtml+= "alto de la resolución de la pantalla (ventana.screen.Height):"+" Window.screen.height +"<br/>"; data.innerhtml += "ancho de la resolución de pantalla (window.screen.width):" +window.screen.width +"<br/>"; data.innerhtml += "<h3> get a la altura </h3>"; data.innerhtmlllllllllllllly = "The High Screen Resolution (Window.Screen.availheight): "+Windows.Screen.availheight+" <br/> "; data.innerhtml+=" ancho de la resolución de pantalla (window.screen.availwidth): "+window.screen.availwidth+" <br/> "; data.innerhtml+=" <hi3> obten .father</h3>";data.innerHTML += ".father upper border (clientTop): "+ father.clientTop+"<br/>";data.innerHTML += ".father left border (clientLeft): "+ father.clientLeft+"<br/>";data.innerHTML += "<h3>Get the distance from .son to the boundary of the parent element (that es, el borde correspondiente al margen+elemento principal) </h3> "; data.innerhtml+=" .son al límite superior del elemento principal (offsettop): "+son.offsettop+" <br/> "; data.innerhtml+=" .Son al límite izquierdo del elemento principal (offsettettetleft): "++ 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 Día </h3> <h3> Mi blog: www.vevb.com </h3> <h3> Grupo QQ QQ: </h3> <h3> 259280570 </h3> <h3> Bienvenido a unirse </h3> <h3> Happy National Day </h3> </div> </div> <div> <h3> Salida de datos <H3> <v3> <v3> id = "data"> </div> </div> </body> </html>