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 入门·JavaScript 具有全范围的运算符
Oct 01 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
JavaScript window.location对象
Nov 14 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
Vue2.0系列之过滤器的使用
Mar 01 Javascript
JS中移除非数字最多保留一位小数
May 09 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
收音机术语解释
2021/03/01 无线电
PHP VS ASP
2006/10/09 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python访问sqlserver示例
2014/02/10 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Django 拆分model和view的实现方法
2019/08/16 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
汽车维修专业个人求职信范文
2014/01/01 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
禁烟标语大全
2014/06/11 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
销售人员管理制度
2015/08/06 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫