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 相关文章推荐
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
vue 左滑删除功能的示例代码
Jan 28 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
es6函数中的作用域实例分析
Apr 18 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分页显示制作详细讲解
2006/12/05 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
js或css实现滚动广告的几种方案
2010/01/28 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript中的delete使用详解
2013/04/11 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Vue.js用法详解
2017/11/13 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
什么是.net
2015/08/03 面试题
九年级家长会邀请函
2014/01/15 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
食堂个人先进事迹
2014/01/22 职场文书
高二政治教学反思
2014/02/01 职场文书
自荐信如何制作?
2014/02/21 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
学校师德师风整改措施
2014/10/27 职场文书
烟台的海导游词
2015/02/02 职场文书
2015年采购员工作总结
2015/04/27 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
2019大学生实习报告
2019/06/21 职场文书