获取窗口属性获取dom尺寸脚本化（上）

最新推荐文章于 2024-10-12 10:41:56 发布

小白追梦

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量69

点赞数

分类专栏： JS dom 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/106365589

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

dom

5 篇文章 0 订阅

订阅专栏

1、 DOM基本操作
封装为一个函数方法后面直接拿出来用就行

（1）屏幕滚动条
纵向滚动条 Y方向
在这里插入图片描述
求横向滚动条 X方向

IE 8 及 IE8 以下不兼容
使用的是另外两个

怎么使用？由于兼容性的问题
用的时候将两个值相加
document.body.scrollLeft + document.documentElement.scrollLeft X方向
document.body.scrollTop + document.documentElement.scrollTop Y方向

3、封装兼容性方法，求滚动条滚动j距离 getScrollOffset()
代码实现

<!DOCTYPE html>
<html lang="en">
<head>
	<title>修炼之路</title>
	<meta charset="utf-8">
	<style type="text/css">
		

	</style>
</head>
<body>
    <hr style="width:10000px">
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	<script type="text/javascript">
		// 封装一个方法 任意滚动条可以看到距离顶端的距离
		function getScrollOffset () {
			if(window.pageXOffset) {
				return {
					x : window.pageXOffset,
					y : window.pageYOffset
				}
			}else{
				return{
					x : document.body.scrollLeft + document.documentElement.scrollLeft,
					y : document.body.scrollTop + document.documentElement.scrollTop
				}
			}
		}
	</script>
</body>
</html>

实现的效果为
在这里插入图片描述

4、查看可视区窗口的尺寸
(1) 标准用法

（2） IE8 及 IE8 以下不兼容的部分
每个浏览器都有两种渲染模式
1、标准模式下最上面加上

2、怪异/混杂模式下(向上一版本兼容，比如现在是ie7 使用ie6 ) 没有加上
document.document