jQuery监听浏览器窗口大小的变化实例


Posted in Javascript onFebruary 07, 2017

方法一:在标签上加入  onLoad="" onResize=""  方法  写上对应的方法即可

方法二:window.onresize=function(){///.....} 在方法里面写上对应的代码即可

着两种方法基本都可以解决问题。

<script>
function adjust(obj){
  var div = document.getElementById("pad");
  var txt = document.getElementById("txt");
  var w = document.body.clientWidth;
  var h = document.body.clientHeight;
  div.style.width = w/3;
  div.style.height = h/3;
  txt.style.width = w/6;
  txt.style.height = h/6;
}
window.onload=function(){
 window.onresize = adjust;
 adjust();
}
</script>
<body style="margin:0px;height:0px;">
<div id="pad" style="background:red;zoom:1;margin:0px;height:0px;">
  <input type="text" id="txt">
</div>
</body>

以上这篇jQuery监听浏览器窗口大小的变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
写自已的js类库需要的核心代码
Jul 16 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
5种处理js跨域问题方法汇总
Dec 04 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
理解jquery事件冒泡
Jan 03 Javascript
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
Bootstrap table表格简单操作
Feb 07 #Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 #Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 #Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 #Javascript
深入理解JavaScript中的for循环
Feb 07 #Javascript
vue实现ToDoList简单实例
Feb 07 #Javascript
js Canvas绘制圆形时钟教程
Feb 06 #Javascript
You might like
Yii实现显示静态页的方法
2016/04/25 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
2011/09/29 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
浅谈React前后端同构防止重复渲染
2018/01/05 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
实例讲解python函数式编程
2014/06/09 Python
python多维数组切片方法
2018/04/13 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python里dict变成list实例方法
2019/06/26 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
python 制作本地应用搜索工具
2021/02/27 Python
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
.net软件工程师面试题
2015/03/31 面试题
一套C#面试题
2013/10/09 面试题
行政经理岗位职责
2013/11/09 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
法律六进活动方案
2014/03/13 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
教师工作表现自我评价
2015/03/05 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript