手机
当前位置:查字典教程网 >编程开发 >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预加载图片的方法

浅谈document.write()输出样式

jquery合并表格中相同文本的相邻单元格

JQuery选择器、过滤器大整理

jQuery的基本概念与高级编程

JavaScript判断数组是否包含指定元素的方法

IE中jscript/javascript的条件编译

游戏人文件夹程序 ver 3.0

jQuery实现鼠标经过图片变亮其他变暗效果

jQuery结合ajax实现动态加载文本内容

精品推荐
分类导航