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 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
javascript call和apply方法
Nov 24 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
js友好的时间返回函数
Aug 24 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 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
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python中time tzset()函数实例用法
2021/02/18 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
大二法学专业职业生涯规划范文
2014/02/12 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
团队精神口号
2014/06/06 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
2014年街道办事处工作总结
2014/12/11 职场文书
文明单位申报材料
2014/12/23 职场文书
学校会议通知范文
2015/04/15 职场文书
iPhone13再次曝光
2021/04/15 数码科技
nginx静态资源的服务器配置方法
2022/07/07 Servers