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 相关文章推荐
jquery中$.post()方法的简单实例
Feb 04 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
koa2实现登录注册功能的示例代码
Dec 03 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
图解上海144收音机
2021/03/02 无线电
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP的面试题集,附我的答案和分析(一)
2006/11/19 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
PHP实现文件下载详解
2014/11/27 PHP
php导出生成word的方法
2015/12/25 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
JavaScript Event学习第三章 早期的事件处理程序
2010/02/07 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
python中的字典操作及字典函数
2018/01/03 Python
Python subprocess模块详细解读
2018/01/29 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
Python中交换两个元素的实现方法
2018/06/29 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python中的tcp示例详解
2018/12/09 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
Java面试题及答案
2012/09/08 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
保护母亲河倡议书
2014/04/14 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
CSS3 制作精美的定价表
2021/04/06 HTML / CSS