Evento de redimensionamento de janela em JavaScript

Evento de redimensionamento de janela em JavaScript

  1. Adicionar um evento de redimensionamento usando a função addEventListener() em JavaScript
  2. 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.

Author: Ammar Ali
Ammar Ali avatar Ammar Ali avatar

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

LinkedIn Facebook

Artigo relacionado - JavaScript Event

  • Chame várias funções JavaScript no evento Onclick