Jquery使容器自适应浏览器窗口

最新推荐文章于 2022-07-29 13:52:03 发布

lemrose

最新推荐文章于 2022-07-29 13:52:03 发布

阅读量1.2w

点赞数 2

分类专栏： JQuery 文章标签： jquery function 浏览器文档 div html

本文链接：https://blog.csdn.net/axin66ok/article/details/7443788

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、几个关键点

1：当文档大小改变时可以通过哪个事件来触发？

resize([Data], fn) 可传入data供函数fn处理。

示例：

$(window).resize(function(){
  alert("Stop it!");
});

2：怎样获得浏览器窗口的宽度高度？

获取当前浏览器窗口的宽度

$(window).width();

          获取第一段的宽

$("p").width()

   
    获取当前HTML文档宽度

 $(document).width();

3：怎样赋值？

方法很多，可以通过css（...）、width(...)等

二、举个例子

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery自适应demo</title>
</head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$(document).ready(function(){
	//初始化宽度、高度
	$("#div1").width($(window).width());
	$("#div1").height($(window).height());
	//当文档窗口发生改变时 触发
	$(window).resize(function(){
		$("#div1").width($(window).width());
		$("#div1").height($(window).height());
	})
	})
</script>
<body style="margin:0;">
    <div id="div1" style="background:#09F">
    	这是一个可以自适应窗口的DIV
    </div>
</body>
</html>

lemrose

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Jquery使容器自适应浏览器窗口

一、几个关键点 1：当文档大小改变时可以通过哪个事件来触发？ resize([Data], fn) 可传入data供函数fn处理。示例： $(window).resize(function(){ alert("Stop it!");}); 2：怎样获得浏览器窗口的宽度高度？
复制链接

扫一扫