window.onresize = function(){};
window.addEventListener('resize', function() {});
window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数。
注意:只要窗口大小发生像素变化,就会触发这个事件。
我们经常利用这个事件完成响应式布局。window.innerWidth 当前屏幕的宽度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div>
</div>
<script type="text/javascript">
window.addEventListener('load', function() {
var div = document.querySelector('div');
window.addEventListener('resize', function() {
if (window.innerWidth <= 800) {
div.style.display = 'none';
} else {
div.style.display = 'block';
}
})
})
</script>
</body>
</html>
当窗口宽度缩小至小于等于800时,就隐藏div元素,反之显示div。