手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery动态调整div大小使其宽度始终为浏览器宽度
jquery动态调整div大小使其宽度始终为浏览器宽度
摘要:有时候我们需要设置宽度为整个浏览器宽度的div,当然我们可以使用相对布局的方式做到这一点,不过我们也可以用jquery来实现。复制代码代码如...

有时候我们需要设置宽度为整个浏览器宽度的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></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动态调整div大小使其宽度始终为浏览器宽度】相关文章:

如何实现浏览器上的右键菜单

JQuery选择器、过滤器大整理

javascript实现动态改变层大小的方法

游戏人文件夹程序 ver 3.0

jQuery实现的多屏图像图层切换效果实例

jquery中添加属性和删除属性

实现高性能JavaScript之执行与加载

javascript实现可拖动变色并关闭层窗口实例

显示、隐藏密码

jquery实现动态改变div宽度和高度

精品推荐
分类导航