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 相关文章推荐
正则表达式语法
Oct 09 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
2019/04/07 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python实现字典的key和values的交换
2015/08/04 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
python面向对象 反射原理解析
2019/08/12 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python生成个性签名图片获取GUI过程解析
2019/12/16 Python
pytorch 求网络模型参数实例
2019/12/30 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
蒂芙尼澳大利亚官方网站:Tiffany&Co. Australia
2017/08/27 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
怎样写好自荐信和推荐信
2013/12/26 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
务工证明怎么写
2015/06/18 职场文书