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 时,还是三个盒子都显示

相关文章
|
15天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
29 2
|
2天前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
18 6
|
5天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
12 0
|
9天前
|
JavaScript 前端开发 开发者
JavaScript 浏览器控制台的使用
JavaScript 浏览器控制台的使用
8 0
|
9天前
|
存储 JavaScript 前端开发
JavaScript 与浏览器存储
JavaScript 与浏览器存储
23 0
|
13天前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
40 0
|
16天前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
|
20天前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
16 2
|
1月前
|
JavaScript 前端开发
js之浏览器对象|28
js之浏览器对象|28
|
2月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
39 1