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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
Jquery节点遍历next与nextAll方法使用示例
Jul 22 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
vue实现多级菜单效果
Oct 19 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 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 判断数组是几维数组
2013/03/20 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
php json转换相关知识(小结)
2018/12/21 PHP
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
python3个性签名设计实现代码
2018/06/19 Python
在python中做正态性检验示例
2019/12/09 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
ktv筹备计划书
2014/05/03 职场文书
迎新晚会策划方案
2014/06/13 职场文书
人力资源管理求职信
2014/08/07 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
长江三峡导游词
2015/01/31 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL