编程 Javascript

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监听浏览器窗口大小的变化实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ajax中get和post的说明及使用与区别

Dec 23 Javascript

推荐25个超炫的jQuery网格插件

Nov 28 Javascript

Jquery 实现grid绑定模板

Jan 28 Javascript

JavaScript实现简单图片翻转的方法

Apr 17 Javascript

JS实现具备延时功能的滑动门菜单效果

Sep 17 Javascript

RequireJS多页面应用实例分析

Jun 29 Javascript

微信小程序前端源码逻辑和工作流

Sep 25 Javascript

脚手架vue-cli工程webpack的作用和特点

Sep 29 Javascript

Vue3.0 响应式系统源码逐行分析讲解

Oct 14 Javascript

解决Vue @submit 提交后不刷新页面问题

Jul 18 Javascript

Postman参数化实现过程及原理解析

Aug 13 Javascript

echarts实现晶体球面投影的实例教程

Oct 10 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