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 相关文章推荐
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
Mar 04 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 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安全防范技巧分享
2011/11/03 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
基于PHPExcel的常用方法总结
2013/06/13 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue实现购物车案例
2020/05/30 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python删除服务器文件代码示例
2018/02/09 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
新驾驶员个人自我评价
2014/01/03 职场文书
中学生励志演讲稿
2014/04/26 职场文书
中秋晚会活动方案
2014/08/31 职场文书
电影开国大典观后感
2015/06/04 职场文书
Python+Tkinter打造签名设计工具
2022/04/01 Python
Python实现双向链表
2022/05/25 Python