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 相关文章推荐
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
JavaScript中创建原子的方法总结
Aug 26 Javascript
如何在项目中使用log4.js的方法步骤
Jul 16 Javascript
JavaScript 闭包的使用场景
Sep 17 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之require/include顺序 推荐
2011/01/02 PHP
php cookie 详解使用实例
2016/11/03 PHP
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python常用模块介绍
2014/11/21 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
flask框架路由常用定义方式总结
2019/07/23 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
康拓普公司Java笔面试
2016/09/23 面试题
会计岗位职责
2013/11/08 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
2014优秀大学生简历自我评价
2014/09/15 职场文书
2014年个人总结范文
2015/03/09 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript