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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
详解Node全局变量global模块
Sep 28 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
js实现select下拉框选择
Jan 11 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
JS访问对象两种方式区别解析
Aug 29 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 adodb连接不同数据库
2009/03/19 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
javascript 函数使用说明
2010/04/07 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
2014/01/17 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
python 制作本地应用搜索工具
2021/02/27 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
Unix控制后台进程都有哪些进程
2016/09/22 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
贷款担保书范文
2014/05/13 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
元旦主持词开场白
2015/05/29 职场文书
单位同意报考证明
2015/06/17 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js