JS 调整窗口大小事件案例

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量1.5k 收藏 1
点赞数 2
文章标签： javascript html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sandrahh/article/details/107312813
版权

JS 调整窗口大小事件案例

window.addEventListener(“resize”,function(){});

利用这个事件完成响应式布局，window.innerWidth当前屏幕的宽度

window.addEventListener（“load”,function(){});

窗口加载事件，是为了页面加载完毕就可以执行函数里面相应的事件，这样就可以把JS代码写到页面元素的上方。window.onload是传统的注册时间方式，他可以实现一样的功能但是只能写一次，多写会只以最后一个window.onload为准

代码

<!DOCTYPE html><html lang="en">
<head>
最低0.47元/天 解锁文章
Sandrahh
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript WebAPI 系列四 键盘事件；顶级对象window；窗口加载事件；调整窗口大小事件；定时器；location对象；navigator对象；history对象及方法
m0_55170432的博客
03-29 281
1.0 常见的键盘事件以及对象 事件除了使用鼠标触发，还可以使用键盘触发， 注意给文档 document 添加键盘事件 键盘事件 onkeyup （某个键盘按键被松开时触发） onkeydown （某个键盘按键被按下是触发） onkeypress （某个键盘按键被按下时并且弹起时触发）这个基本不用！ 它不识别功能键，比如左右箭头，shift 等；并且他区分大小写 事件对象： keyCode 是事件对象（返回改建的ASCLL表的值） 注意： onkeypress 和前面2个的区别是，它不识别功
js调整浏览器窗口大小事件window.innerWidth
爬楼梯的前端小白的博客
02-02 2254
js调整浏览器窗口大小事件window.innerWidth，当窗口小时，隐藏某div
学习使用js监测浏览器窗口大小变化
徊忆羽菲
06-06 821
在JavaScript中，可以通过监听resize事件来检测浏览器窗口的大小变化。以下是一个简单的示例代码，用于检测浏览器窗口大小的变化并在控制台输出新的窗口尺寸：
调整窗口大小事件
a63438840的博客
09-08 498
1,window.onresize 时调整窗口大小加载事件，当触发时就调用的处理<!DOCTYPE html> 下面，当窗口大小改变时，控制台就会输出窗口的宽度，并打印出 “ 变化了”。 window.innerWidth 当前屏幕的宽度 <html lang="en"> <head> <meta charset="UT...
调整浏览器窗口大小的事件
weixin_52212950的博客
03-04 2940
淘宝网在页面缩小过程中会将中间的商品栏隐藏掉，这就用到了浏览器窗口的事件 window.addEventListener( 'resize', function() { }) 只要浏览器窗口发生变化就会触发该事件，window.innerWidth 是获取当前浏览器的页面宽度 window.addEventListener('resize',function(){ console.log(window.innerWidth); }) 可以看出当拖动浏..
JavaScript — resize事件监听窗口变化
热门推荐
旧梦
08-26 3万+
前言 resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。 接下来利用 resize 事件实现一个小案例：监听浏览器窗口变化，实时获取该窗口的宽度和高度。 实现 首先写一个获取窗口宽高的方法 const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind
js事件以及案例
shaco335的博客
03-12 1032
目录 onload 页面加载事件 onresize 改变窗口大小时触发事件 onscroll滚动条事件 表单事件 键盘事件 鼠标事件 事件绑定 冒泡事件 捕获事件案例 onload 页面加载事件 window.onload是一个事件，在文档加载完成后能立即触发，并且能够为该事件注册事件处理函数。将要对对象或者模块进行操作的代码存放在处理函数中。即：window.onload =function (){这里写操作的代码}; 案例： <img src="images/lo
BOM（一）：window对象的常见事件（页面加载、调整窗口大小）、定时器
m0_73560798的博客
11-29 200
BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
weixin_39609953的博客
12-30 1589
我就废话不多说了，大家还是直接看代码吧~内容如下：// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById('myChart'))//根据窗口的大小变动图表 --- 重点window.onresize = function(){myChart.resize();//myChart1.resiz...
python控制其他程序窗口大小_selenium窗口操作-打开切换窗口,指定窗口位置、大小等...
weixin_39867142的博客
12-07 1135
浏览器可以打开多个标签页(窗口)，selenium当然也可以。浏览器可以打开、关闭、切换窗口,selenium的也是可以的。【新开标签页才会增加window_handle，如果只是在当前窗口打开其他网址并不会增加window_handle，网上的好多例子都是错的。】selenium窗口操作包括：driver.current_window_handle() 获取当前窗口句柄driver.window...
JavaScript控制窗口1案例.pdf
07-11
3. **案例3：改变窗口大小** 这个案例展示了如何打开一个新的窗口并动态改变其大小。通过`window.open(url, name, features)`创建新窗口，`win2.resizeTo(width, height)`和`win2.resizeBy(dx, dy)`用于设定或改变...
JavaScript页面事件案例.pdf
07-11
在给定的代码中，当用户尝试调整浏览器窗口大小时，JavaScript函数`fastness()`被调用，将窗口大小固定为650像素宽和500像素高。`onload`事件也被用于确保页面加载时就执行一次`fastness()`，以防止用户在页面加载...
拖拽并可以改变大小的实现案例JS源码
06-13
在JavaScript编程中，实现拖拽和窗口大小调整功能是一项常见的需求，特别是在开发Web应用程序时，为了提供用户友好的界面交互。本案例中的"拖拽并可以改变大小的实现案例JS源码"就是针对这一需求的一个解决方案。...
jQuery响应浏览器窗口大小图片排列代码
06-24
在这个案例中，jQuery被用来监听浏览器窗口的resize事件，当用户调整窗口大小时，图片布局会随之动态更新。 响应式设计的核心在于媒体查询（Media Queries）和流式布局（Fluid Grids），但jQuery可以作为辅助工具，...
jQuery自适应窗口大小轮播图特效.zip
11-24
在这个案例中，jQuery被用来控制轮播图的切换、动画效果以及对窗口大小变化的响应。 2. **CSS**：层叠样式表（CSS）用于定义网页的布局和样式。在轮播图中，CSS用于设置图片的布局、位置、过渡效果等，使其能够在...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 474
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1303
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1084
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue中echarts图表大小适应窗口大小且不需要刷新案例
09-03
在Vue中实现echarts图表大小适应窗口大小且不需要刷新的方法有很多种，下面以一种常用的方法来进行说明。 首先，我们需要引入echarts的库文件和echarts的vue组件。 ```javascript import echarts from 'echarts' import 'echarts/extension/bmap/bmap' // 如需使用百度地图，还需要引入这个文件 import ECharts from 'vue-echarts' ``` 然后，我们在Vue组件的template中使用ECharts组件来渲染echarts图表，并绑定一个方法来动态设置图表的大小。 ```html <template> <div> <ECharts :options="chartOptions" :style="chartStyle" @ready="handleChartReady"></ECharts> </div> </template> ``` 接下来，我们在Vue组件的script中定义chartOptions和chartStyle两个数据，分别用来指定图表的配置项和样式。 ```javascript <script> export default { data() { return { chartOptions: {...}, // 这里是echarts的配置项，根据需求自行设置 chartStyle: {} // 这里是样式对象，初始值为空 } }, methods: { handleChartReady() { // 获取窗口大小 const {clientWidth, clientHeight} = document.documentElement // 设置图表大小为窗口大小 this.chartStyle = { width: clientWidth + 'px', height: clientHeight + 'px' } // 调用echarts的resize方法，使图表大小生效 this.$refs.chart.resize() } } } </script> ``` 最后，我们在Vue组件的mounted钩子中，初始化图表并调用handleChartReady方法，以确保图表在组件挂载后立即适应窗口大小。 ```javascript mounted() { this.$refs.chart.init() this.handleChartReady() } ``` 通过以上步骤，我们就实现了一个可以自适应窗口大小的echarts图表，并且不需要手动刷新的案例。当窗口大小改变时，图表会动态调整大小以适应窗口，而不需要刷新整个页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值