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 相关文章推荐
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 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
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
document.write的几点使用心得
2014/05/14 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
原生JS实现自定义滚动条效果
2020/10/27 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python 12306抢火车票脚本
2018/02/07 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
信号生成及DFT的python实现方式
2020/02/25 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
EJB timer的种类
2014/10/28 面试题
公司授权委托书
2014/04/04 职场文书
文化建设工作方案
2014/05/12 职场文书