jquery动态调整div大小使其宽度始终为浏览器宽度
更新时间：2014年06月06日 10:14:03 作者：
需要设置宽度为整个浏览器宽度的div，当然我们可以使用相对布局的方式做到这一点，下面是具体实现，大家可以参考下
有时候我们需要设置宽度为整个浏览器宽度的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的宽度进行调整。
复制代码 代码如下:
<!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的宽度进行调整。
相关文章
这篇文章主要介绍了浅析jQuery Ajax请求参数和返回数据的处理的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了Jquery Easyui菜单组件Menu的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
我们都知道,很多时候,在页面加载完后都需要做一些相应的初始化动作.例如,运行某些js特效,设置表单等等.怎么知道页面加载完了呢?2009-12-12
这篇文章主要介绍了修改或扩展jQuery原生方法的代码实例,本文用一个扩展jquery原生方法val的例子,讲解了如何对jquery原生方法修改或扩展,需要的朋友可以参考下2015-01-01
可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动2008-12-12
在网页开发中，经常会需要不断的刷新某个页面或某个局部数据。这时候就需要用到定时刷新来实现了。接下来通过本文给大家分享jquery实现定时刷新功能，需要的朋友参考下吧2017-05-05
基于jquery的滚动鼠标放大缩小图片效果，需要的朋友可以参考下。2011-10-10
一个基于jQuery的气泡动画插件，在指定区域上方（左/右）定时间隔产生气泡，然后随机水平速度进行仿自由落体运动。这篇文章主要介绍了jQuery 插件实现随机自由弹跳气泡样式的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了jQuery+PHP打造滑动开关效果,实现类似360安全卫士防火墙开启关闭的开关,非常的实用，这里推荐给大家2014-12-12
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
这篇文章主要介绍了JQuery控制div外点击隐藏而div内点击不会隐藏的方法,涉及show、hide及stopPropagation等方法的使用技巧,需要的朋友可以参考下2015-01-01
最新评论