EN
JavaScript - resize event example
0 points
In this article, we would like to show you resize event example in JavaScript.
Quick solution:
xxxxxxxxxx
1
var myElement = document.querySelector('#my-element');
2
3
myElement.addEventListener('resize', function() {
4
console.log('resize event occurred.');
5
});
or:
xxxxxxxxxx
1
<div id="my-element" resize="handleResize()">
2
<!-- div body here... -->
3
</div>
or:
xxxxxxxxxx
1
var myElement = document.querySelector('#my-element');
2
3
myElement.onresize = function() {
4
console.log('onresize event occurred.');
5
};
There are three common ways how to use resize event:
- with event listener,
- with element attribute,
- with element property.
In this section, we want to show how to use resize
event on window
element via event listener mechanism.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<div>
5
Window resized: <span id="my-span">0</span> times.
6
</div>
7
<script>
8
var x = 0;
9
window.addEventListener('resize', handleResize);
10
function handleResize(){
11
document.querySelector("#my-span").innerHTML = x += 1;
12
}
13
</script>
14
</body>
15
</html>
In this section, we want to show how to use resize
event on window
element via attribute.
xxxxxxxxxx
1
2
<html>
3
<body onresize="handleResize()">
4
<div>
5
Window resized: <span id="my-span">0</span> times.
6
</div>
7
<script>
8
var x = 0;
9
function handleResize(){
10
document.querySelector("#my-span").innerHTML = x += 1;
11
}
12
</script>
13
</body>
14
</html>
In this section, we want to show how to use resize
event on window
element via property.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<div>
5
Window resized: <span id="my-span">0</span> times.
6
</div>
7
<script>
8
var x = 0;
9
window.onresize = function handleResize(){
10
document.querySelector("#my-span").innerHTML = x += 1;
11
}
12
</script>
13
</body>
14
</html>
