jquery动态调整div大小使其宽度始终为浏览器宽度


Posted in Javascript onJune 06, 2014

有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>jquery test</title> 
<script src="jquery-1.11.1.min.js"></script> 
<style type="text/css"> 
.show 
{ 
width: 500px; 
height: 50px; 
background-color: red; 
} 
</style> 
</head> <body> 
<div class="show"></div> 
<script> 
var browser_width = $(document.body).width(); 
$("div.show").css("width",browser_width); 
$(window).resize(function() { 
browser_width = $(document.body).width(); 
$("div.show").css("width",browser_width); 
}); 
</script> 
</html>

我们使用$(document.body).width()获取浏览器内容的宽度,在加载页面的时候我们初始化该div的宽度为浏览器页面的宽度,然后每当浏览器大小调整的时候,都会触发resize函数,此时我们再次对该div的宽度进行调整。
Javascript 相关文章推荐
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
angularJS 中input示例分享
Feb 09 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
js中对象与对象创建方法的各种方法
Feb 27 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
JavaScript也谈内存优化
Jun 06 #Javascript
Javascript中的delete操作符详细介绍
Jun 06 #Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 #Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 #Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 #Javascript
按钮接受回车事件的三种实现方法
Jun 06 #Javascript
jquery统计用户选中的复选框的个数
Jun 06 #Javascript
You might like
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
PHP操作Memcache实例介绍
2013/06/14 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
Javascript 布尔型分析
2008/12/22 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JS常用算法实现代码
2016/11/14 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python实现石头剪刀布程序
2021/01/20 Python
浅谈Python type的使用
2019/11/19 Python
pandas中ix的使用详细讲解
2020/03/09 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
python lambda的使用详解
2021/02/26 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
在使用非全零作为空指针内部表达的机器上, NULL是如何定义
2014/11/09 面试题
中学生学习生活的自我评价
2013/10/26 职场文书
销售顾问岗位职责
2014/02/25 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技