Evento de redimensionamento de janela em JavaScript
-
Adicionar um evento de redimensionamento usando a função
addEventListener()em JavaScript -
Adicionar um evento de redimensionamento usando a função
onresize()em JavaScript
Este tutorial irá discutir a adição de um evento de redimensionamento usando as funções addEventListener() e onresize() em JavaScript.
Adicionar um evento de redimensionamento usando a função addEventListener() em JavaScript
Para adicionar um evento de redimensionamento à janela, podemos usar a função addEventListener() em JavaScript. Esta função adiciona um evento que contém uma função a um objeto. Por exemplo, vamos adicionar um evento à janela do objeto para obter sua largura e altura e mostrá-lo na página da web. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Resultado:
Width = 798
Height = 779
No código acima, adicionamos um span com o texto Width=, e depois disso, adicionamos um span vazio com um id SpanID1 na seção do corpo. Adicionamos uma tag br para mover o cursor para uma nova linha e, na nova linha, adicionamos outro intervalo com o texto Height= e, depois disso, adicionamos outro intervalo vazio com um id SpanID2.
O id do span será usado para obter o elemento em JavaScript. Na tag de script, temos uma função start(), que é usada para alterar o texto dos dois vãos com a largura e altura da janela. Após a função start(), adicionamos o evento resize, que irá chamar a função start() quando um usuário redimensionar a janela. A largura e a altura da janela serão mostradas na página e serão alteradas conforme o tamanho da janela for alterado. Você pode salvar o código acima em um arquivo HTML e abri-lo em qualquer navegador e alterar seu tamanho para ver se o código funciona ou não. Você também pode usar a função addEventListener() para adicionar um evento a qualquer objeto, como uma caixa de seleção.
Adicionar um evento de redimensionamento usando a função onresize() em JavaScript
Para adicionar um evento de redimensionamento à janela, podemos usar a função onresize() em JavaScript. Esta função é usada para especificar o que acontecerá se o tamanho de uma janela for alterado. Por exemplo, vamos adicionar um evento à janela do objeto para obter sua largura e altura e mostrá-lo na página da web. Veja o código abaixo.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Resultado:
Width = 798
Height = 779
No código acima, a função start() será chamada se o tamanho da janela estiver sendo alterado. Como você pode ver, a saída é a mesma do método acima.
