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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
Vuex入门到上手教程
Jun 20 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 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
我的论坛源代码(三)
2006/10/09 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
php 生成Tab键或逗号分隔的CSV
2016/09/24 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
2016/12/18 Javascript
vue自定义指令directive实例详解
2018/01/17 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python 操作文件的基本方法总结
2017/08/10 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python的pytest框架之命令行参数详解(上)
2019/06/27 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
python如何爬取网页中的文字
2020/07/28 Python
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
旷课检讨书大全
2014/01/21 职场文书
代理商会议邀请函
2014/01/27 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
合伙经营协议书范本(通用版)
2014/12/03 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB