Desenvolvimento
Teste 12 - clientWidth/innerWidth e clientHeight/innerHeight
Ao clicar na figura abaixo, uma mensagem contendo as dimensões ativas do browser do usuário é mostrada. Experimente redimensionar a tela para ver resultados diferentes.
Eis o código:
<head>
<script>
function findPageHeight() {
if (window.innerHeight != null) // Para o Netscape
return window.innerHeight
if (document.body.clientHeight != null) // Para o Internet Explorer
return document.body.clientHeight
return (null);
}
function findPageWidth() {
if (window.innerWidth != null) // Para o Netscape
return window.innerWidth
if (document.body.clientWidth != null) // Para o Internet Explorer
return document.body.clientWidth
return (null);
}
function showPageDim() {
livePageHeight = findPageHeight()
livePageWidth = findPageWidth()
alert('Largura visível da página: ' + livePageWidth + 'px. \n \
Altura visível da página: ' + livePageHeight + 'px.')
}
</script>
</head>
<body>
<div align="center">
<img src="../../images/photos/pht_Jack.jpg" border="0" onClick="showPageDim()" />
</div>
</body>
<script>
function findPageHeight() {
if (window.innerHeight != null) // Para o Netscape
return window.innerHeight
if (document.body.clientHeight != null) // Para o Internet Explorer
return document.body.clientHeight
return (null);
}
function findPageWidth() {
if (window.innerWidth != null) // Para o Netscape
return window.innerWidth
if (document.body.clientWidth != null) // Para o Internet Explorer
return document.body.clientWidth
return (null);
}
function showPageDim() {
livePageHeight = findPageHeight()
livePageWidth = findPageWidth()
alert('Largura visível da página: ' + livePageWidth + 'px. \n \
Altura visível da página: ' + livePageHeight + 'px.')
}
</script>
</head>
<body>
<div align="center">
<img src="../../images/photos/pht_Jack.jpg" border="0" onClick="showPageDim()" />
</div>
</body>
O evento onClick da imagem do Jack Nicholson corresponde à função showPageDim(), que mostra as dimensões da página. Duas variáveis recebem os resultados de duas outras funções, cada uma responsável por coletar uma dimensão (altura - Height e largura - Width). O comando alert faz a concatenação dos resultados com um texto para emissão numa caixa de mensagem.
As cláusulas if estão sendo usadas para retornar os valores de largura e altura, dependendo do browser usado. Para cada browser, há um jeito diferente de referenciar estas propriedades.