DOM基本操作之习题二

最新推荐文章于 2022-09-13 10:04:59 发布

gxgalaxy

最新推荐文章于 2022-09-13 10:04:59 发布

阅读量326

点赞数

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/gxgalaxy/article/details/90419287

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JavaScript

23 篇文章 1 订阅

订阅专栏

1、封装兼容性方法，求滚动条滚动离getScrollOffset()

<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>

2、封装兼容性方法，返回浏览器视口尺寸grtViewportOffset()

<script type="text/javascript">
function getViewportOffset(){
 		if(window.innerWidth){
 			return{
 				w : window.innerWidth,
 				h : window.innerHeight
 			}
 		}else{
 			if(document.compatModde == "BackCompat"){
 				return{
 					w : document.body.clientWidth,
 					h : document.body.clientHeight
 				}
 			}else{
 				return{
 					w : document.documentElement.clientWidth,
 					h : document.documentElement.clientHeight
 				}

 			}
 		}
 	}
</script>

3、利用scrollBy()快速阅读的功能（自动阅读）

<!DOCTYPE  html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<link rel="stylesheet" href="./src/demo.css">

	</head>
<body>
<!-- 此处自行加入多行文本 -->
N个汉字
    <div style="width: 100px;height: 100px;background-color: orange;color#fff;font-size: 40px;font-weight:bold;text-align: center;line-height: 100px;position: fixed;bottom: 200px;right: 50px;border-radius: 50%;opacity: 0.5;">start</div>
    <div style="width: 100px;height: 100px;background-color: #0f0;color:#fff;font-size: 40px;font-weight:bold;text-align: center;line-height: 100px;position: fixed;bottom: 50px;right: 50px;border-radius: 50%;opacity: 0.5;">stop</div>
	<script type="text/javascript">
	var start = document.getElementsByTagName('div')[0];
	var stop = document.getElementsByTagName('div')[1];
	var timer = 0;
	var key = true;  //加一个锁来清除多次点击造成的速度加快无法停止的问题
	start.onclick = function(){

		if(key){
			timer = setInterval(function(){
			window.scrollBy(0,10);
		},100);
			key = false;  //点击一次加锁
		}
	}
	stop.onclick = function(){
		clearInterval(timer);
		key = true;   //清除后开锁 
	}

</script>
</body>
</html>

4、封装兼容性方法getStyle(elem,prop)

<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
	
	function getStyle(elem,prop){
		if (window.getComputedStyle) {
			return window.getComputedStyle(elem,null)[prop];
		}else{
			return elem.currentStyle[prop];
		}
	}


	
</script>