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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript与有限状态机详解
May 08 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
javascript实现移动端轮播图
Dec 09 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开启gzip页面压缩实例代码
2010/03/11 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php中apc缓存使用示例
2013/12/25 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
js隐式全局变量造成的bug示例代码
2014/04/22 Javascript
javascript trim函数在IE下不能用的解决方法
2014/09/12 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
js实现选项卡效果
2020/03/07 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Python自动连接ssh的方法
2015/03/07 Python
Python 模拟员工信息数据库操作的实例
2017/10/23 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
基于Python实现用户管理系统
2019/02/26 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
党员民主评议个人总结
2014/10/20 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
招商银行工作证明
2015/06/17 职场文书
爱护公物主题班会
2015/08/17 职场文书
学风建设主题班会
2015/08/17 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server