JS 调整浏览器窗口大小事件

简介: JS 调整浏览器窗口大小事件

淘宝网在页面缩小过程中会将中间的商品栏隐藏掉,这就用到了浏览器窗口的事件


window.addEventListener( 'resize', function() { })

只要浏览器窗口发生变化就会触发该事件, window.innerWidth 是获取当前浏览器的页面宽度

window.addEventListener('resize',function(){
console.log(window.innerWidth);
        })

可以看出当拖动浏览器窗口变化时候,控制台输出的浏览器宽度一直在变

对此我们就可以完成一个淘宝网相同原理的案例

我们就使其窗口宽度小于 950 时将中间黄色盒子隐藏

<script>window.addEventListener('DOMContentLoaded',function(){
varcenter=document.querySelector('.center')
window.addEventListener('resize',function(){
if(innerWidth<950){
center.style.display='none';
           }else{
center.style.display='block';
           }
        })
    })
</script><divclass="left"></div><divclass="center"></div><divclass="right"></div></body>

当浏览器窗口宽度在 951 时,还是三个盒子都显示

相关文章
|
3天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
9 0
|
21天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
11 0
|
2天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素传递,而事件捕获则从外层元素向内层传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。示例代码展示了如何设置。
17 2
|
7天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
10天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
17天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
21天前
|
存储 JavaScript 前端开发
在浏览器中存储数组和对象(js的问题)
在浏览器中存储数组和对象(js的问题)
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
110 0
Javascript 事件propagation机制
|
JavaScript 前端开发
Javascript 事件propagation机制
Javascript 事件propagation机制
139 0
Javascript 事件propagation机制
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0