Código HTML:
A cópia do código é a seguinte:
<Body>
<div id = "Pai">
<H3> Este é o elemento pai, a resolução da tela é 1366*768 </h3>
<div id = "filho">
<H3> Este é um elemento infantil, desejo a todos um feliz dia nacional </h3>
<div id = "neto">
<H3> Este é o elemento do neto, desejo a todos um feliz dia nacional </h3>
<H3> Meu blog: www.vevb.com </h3>
<H3> Entusiasta do programa Grupo QQ: </h3>
<H3> 259280570 </h3>
<H3> Bem -vindo a participar </h3>
<H3> Feliz Dia Nacional </h3>
</div>
</div>
</div>
<div>
<H3> Saída de dados </h3>
<div id = "dados"> </div>
</div>
</body>
CSS:
A cópia do código é a seguinte:
*
{
margem: 0 automático;
}
.pai
{
Largura: 500px;
Altura: 750px;
borda: 5px vermelho sólido;
flutuar: esquerda;
}
.filho
{
Largura: 400px;
Altura: 300px;
borda: 5px preto sólido;
margem: 20px;
}
.neto
{
Largura: 150px;
Altura: 100px;
borda: 5px azul sólido;
margem: 20px;
Overflow: Auto;
}
.dados
{
Largura: 600px;
Altura: 750px;
borda: 5px vermelho sólido;
flutuar: esquerda;
margem-esquerda: 15px;
}
JS:
A cópia do código é a seguinte:
window.onload = function ()
{
/*Obtenha objeto de elemento*/
var pai = document.getElementById ('pai');
var filho = document.getElementById ('filho');
var nengson = document.getElementById ('gradson');
var dados = document.getElementById ('dados');
data.innerhtml = "<H3> Obtenha o tamanho da janela (relacionado ao tamanho da janela) </h3>";
data.innerhtml+= "document.body visível na área:"+document.body.clientwidth+"<br/>";
data.innerhtml+= "document.body visível altura:"+document.body.clientHeight+"<br/>";
data.innerhtml+= "window.innerWidth Largura da área visível:"+window.innerwidth+"<br/>";
data.innerhtml+= "Window.innerHeight ALTURA DE ÁREA VISÍVEL:"+Window.innerHeight+"<br/>";
data.innerhtml+= "Document.DocumentElement Largura da área visível:"+document.documentElement.clientWidth+"<br/>";
data.innerhtml+= "document.documentElement área visível altura:"+document.documentElement.clientHeight+"<br/>";
data.innerhtml += "<H3> Obtém o tamanho do próprio elemento (não relacionado se existe uma barra de rolagem) </h3>";
Data.innerhtml+= ".son a própria largura (propriedade offsetWidth, incluindo fronteiras esquerda e direita):"+SON.OFFSETWIDTH+"<br/>";
Data.innerhtml+= ".son Altura do.
data.innerhtml+= ".son largura visual (atributo de largura do cliente, excluindo bordas esquerda e direita):"+son.clientWidth+"<br/>";
data.innerhtml+= ".son Altura visual (propriedade do cliente, excluindo fronteiras superior e inferior):"+son.clientHeight+"<br/>";
data.innerhtml += "<h3> gets.gradson tamanho de rolagem e tamanho visual </h3>";
data.innerhtml+= ".gradson scroll width (propriedade scrollwidth):"+gradson.scrollwidth+"<br/>";
data.innerhtml+= ".gradson roll altura (propriedade scrollheight):"+gradson.scrollheight+"<br/>";
Data.innerhtml+= ".gradson Largura visual (propriedade de largura do cliente, excluindo barras de rolagem vertical e borda):"+gradson.clientWidth+"<br/>";
data.innerhtml+= ".gradson altura visual (propriedade do cliente, excluindo barras de rolagem horizontal e borda):"+gradson.clientHeight+"<br/>";
Data.innerhtml += "<H3> Obtém o tamanho do .gradson lamado (relacionado à posição da barra de rolagem) </h3>";
Data.innerhtml+= ".gradson é rolado alto (propriedade Scrolltop, lâminas de barra de rolagem vertical na parte inferior):"+gradson.scrolltop+"<br/>";
Data.innerhtml+= ".gradson é retirado da esquerda (propriedade ScrollLeft, barra de rolagem horizontal para a extremidade mais à direita):"+gradson.scrollleft+"<br/>";
data.innerhtml += "<H3> Obtenha o local da janela do navegador (relacionado ao tamanho da janela) </h3>";
/*
*IE, Chrome, Safari e Opera fornecem suporte para Window.Screenleft e *Window.ScREENTOP, mas o Firxfox não suporta essas duas propriedades;
* FIRXFOX, Chrome, Safari e Opera fornecem suporte para janela.screenx * e window.screeny, mas o IE não suporta essas duas propriedades;
*/
var leftPos = (typeof window.screenLeft == 'número')? Window.Screenleft: window.screenx;
var toppos = (typeof window.screentop == 'número')? Window.ScREENTOP: Window.screeny;
data.innerhtml+= "Na parte do corpo da página do corpo (window.screentop (y)):"+toppos+"<br/>";
Data.innerhtml+= "Página do corpo Texto corporal esquerda (Window.Screenleft (x)):"+leftPos+"<br/>";
data.innerhtml += "<H3> Obtenha resolução da tela </h3>";
data.innerhtml+= "resolução alta na tela (window.screen.height):"+window.screen.height+"<br/>";
data.innerhtml+= "Largura da resolução da tela (window.screen.width):"+window.screen.width+"<br/>";
data.innerhtml += "<H3> Obtenha a altura e a largura disponíveis para a tela </h3>";
data.innerhtml+= "Resolução alta da tela (window.screen.availHeight):"+window.screen.availHeight+"<br/>";
data.innerhtml+= "Largura da resolução da tela (window.screen.availwidth):"+window.screen.availwidth+"<br/>";
data.innerhtml += "<H3> Obtenha o tamanho da borda do .father </h3>";
Data.innerhtml+= ".father Upper Border (clienttop):"+pad.clienttop+"<br/>";
Data.innerhtml+= ".father esquerda borda (cliente):"+pad.clientleft+"<br/>";
data.innerhtml + = "<H3> Obtém a distância de .son até o limite do elemento pai (ou seja, a borda correspondente à margem + elemento pai) </h3>";
data.innerhtml+= ".son para o limite superior do elemento pai (offsetTop):"+son.offsettop+"<br/>";
data.innerhtml+= ".son para o limite esquerdo do elemento pai (offsetleft):"+son.offsetleft+"<br/>";
}
PS: Existem diferenças na análise do navegador da caixa; portanto, haverá pequenas diferenças nos dados obtidos acima. Uma foto anexada.
Código completo:
<! Doctype html public "-// w3c // dtd html 4.01 transitório // pt" "http://www.w3.org/tr/html4/loose.dtd"> <html> <tititer> charset = "utf-8"/>> type = "text/css">*{margem: 0 auto;}. pai {largura: 500px; altura: 750px; borda: 5px vermelho sólido; flutuação: esquerda;}. filho {width: 400px; altura: 300px; borda: 5px Black; margin; 20px;}. azul; margem: 20px; transbordamento: auto;}. dados {largura: 600px; altura: 750px; borda: 5px vermelho sólido; flutuação: esquerda; margin-left: 15px;} </style> <script type = "text/javascript"> window.ongleg =.) (*elemento> document.getElementById ('filho'); var nengson = document.getElementById ('gradson'); var data = document.getElementById ('dados'); data.innerhtml = "<h3> Obtenha o tamanho da janela (relacionado ao tamanho da janela) </h3>"; data.innerhtml += ".Bernable Whom Wlorth) </h3> "; data.innerhtml +=" "+document.body.clientwidth+" <br/> "; data.innerhtml+=" document.body visível altura: "+document.body.clientHeight+" <br/> "; data.innerhtml+=" window.innerwidth Area visível largura: "+window.innerwidth+" <bra "; height: "+window.innerHeight+"<br/>";data.innerHTML += "document.documentElement visible area width: "+document.documentElement.clientWidth+"<br/>";data.innerHTML += "document.documentElement visible area height: "+document.documentElement.clientHeight+"<br/>";data.innerHTML += "<H3> Obtenha o tamanho do próprio elemento (não relacionado se existe uma barra de rolagem) </h3>"; data.innerhtml += ".son a própria largura (atributo offsetWidth, incluindo as bordas esquerda e direita):" Son.offsetWidth +"<br/>"; data.innerhtml). "+SON.OFFSETHEIGHT+" <br/> "; data.innerhtml+=" .son Largura visível (atributo de largura do cliente, sem incluir fronteiras esquerda e direita): "+son.clientwidth+" <br/> "; dados. "+son.clientHeight+" <br/> "; data.innerhtml+=" <H3> GET. Gradson Tamanho de rolagem e tamanho visível </h3> "; data.innerhtml+=" .gradson scroll width (scrollwidth): "+gradson.scrollllllllrold) (datafll (scrollwidth). Propriedade): "+gradson.scrolHeight+" <br/> "; data.innerhtml+=" .grandson Largura visual (atributo de largura de cliente, excluindo barras de rolagem vertical e borda): "+neningson.clientwidth+" <br/>; data.innerhtml+= ".grandson Visualwidth+" " +nengson.clientHeight +" <br/> "; data.innerhtml +=" <h3> Obtenha o tamanho de .grandson sendo lançado (relacionado à posição da barra de rolagem) </h3> "; Data.innerhtml += .grandson é lançado em alta (propriedades de rolagem, vertical barra de barra de rolagem, a barra de barra de scrolllol, a barra de barra de rolagem, a barra de barra de rolagem, a barra de barragem, a barra de barro. "+neningson.Scrolltop+" <br/> "; data.innerhtml+=" .grandson é lançado à esquerda (propriedade rollleft, barra de rolagem horizontal desliza para a direita): "+neningson.Scrollleft+" <br/>; data.innerhtml+= "<H3> Get The Browt+" tamanho) </h3> ";/** IE, Chrome, Safari, Opera, todos fornecem suporte para Window.ScreenLeft e*Window.ScREENTOP, mas o Firxfox não suporta essas duas propriedades; * Firxfox, Chrome, Safari e Opera fornecem suporte para janela.Screenx * e Window.Screeny, mas o IE não suporta essas duas propriedades; */var leftPos = (typeof window.screenleft == 'número')? window.screenleft: window.screenx; var toppos = (typeof window.screentop == 'número')? Window.Screentep: window.screeny; data.innerhtml += "na parte do corpo da web (window..scrente; toppos+"<br/>"; data.innerhtml+= "Página corporal Página do corpo Texto da parte esquerda (window.screenleft (x)):"+leftPos+"<br/>"; data.innerhtml+= "<h3> obter resolução da tela </h3>"; data.innerhtml+= "High (H3> Resolução da tela </h3>"; window.Screen.Height+"<br/>"; data.innerhtml+= "Largura da resolução da tela (window.screen.width):"+window.screen.width+"<br/>"; data.innerhtml+= "<h3> A altura disponível window.screen.AVailHeight +"<br/>"; data.innerhtml += "largura da resolução da tela (window.screen.availwidth):" +window.screen.availwidth +"<br/>"; data.innerhtml += "<h3> Tamanho da borda de .father </h3"; (clienttop): "+pai.clienttop+" <br/> "; data.innerhtml+=" .father fronteira esquerda (clientleft): "+pad.clientleft+" <br/> "; data.innerhtml+=" <h3> Obtenha a distância. elemento) </h3> "; data.innerhtml+=" .son para o limite superior do elemento pai (OFFSETTOP): "+SON.OFFSETTOP+" <br/> "; data.innerhtml+=" .son ao limite esquerdo do elemento pai (OFFSETLEFT): "SOL.OFFSETLEFT+" id = "pai"> <H3> Este é o elemento pai, a resolução da tela é 1366*768 </h3> <div id = "filho"> <h3> Este é um elemento infantil, desejo -lhe um feliz dia nacional </h3> <div id = "neto"> <h3> Este é um neto, eu desejo um dia nacional </H3 www.vevb.com </h3> <h3> amante do programa Grupo QQ: </h3> <h3> 259280570 </h3> <h3> Bem -vindo a participar </h3> <h3> DIVNO </HINV </h3>