任务1：获取元素的位置和大小
任务要求：
演示offset系列属性的使用。
任务分析：
在页面创建div嵌套结构，最外层div设置相对定位（relative）,通过JavaScript获取最内层div的offsetParent、offsetLeft和offsetWidth属性值。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#a {
position: relative;
}
#b {
margin-left: 5px;
}
#c {
width: 50px;
height: 50px;
background: pink;
margin-left: 10px;
}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c"></div>
</div>
</div>
<script>
var c = document.getElementById("c");
console.log(c.offsetParent);
console.log(c.offsetLeft);
console.log(c.offsetWidth);
</script>
</body>
</html>
任务2：获取元素的可视区域
任务要求：
掌握client系列属性的使用。
任务分析：
页面中创建一个div元素，给div元素填充内容，使其超出div的高度，并获取div元素的clientHeight、clientTop和clientLeft属性值。
任务实现：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:200px;height:200px;background-color: pink;border: 10px solid red;}
</style>
</head>
<body>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容 我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
var div=document.querySelector("div");
console.log(div.clientHeight);
console.log(div.clientTop);
console.log(div.clientLeft);
console.log(div.offsetWidth);
</script>
</body>
</html>
任务3：元素的滚动操作
任务要求：
掌握如何在div元素滚动时获取滚动信息。
任务分析：
页面中创建一个具有滚动条的div元素，实现在div元素滚动时在控制台输出scrollTop、scrollHeight信息。
任务实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width:200px;height:200px;background-color: pink;overflow: auto;border: 10px solid red;}
</style>
</head>
<body>
<div>
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
var div=document.querySelector("div");
div.addEventListener("scroll",function(){
console.log(div.scrollTop,div.scrollHeight);
})
</script>
</body>
</html>
任务4：获取鼠标指针位置
任务要求：
实现当使用鼠标单击页面时，在页面中显示鼠标单击的位置。
效果如下图所示：
任务分析：
定义<div>标签，表示鼠标单击页面的位置，默认情况下隐藏；为document对象添加单击事件、并对单击事件进行处理，获取鼠标指针在页面中的位置。
任务实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mouse{position: absolute;;background: #ffd965;width: 48px;height: 48px;border-radius: 24px;}
</style>
</head>
<body>
<div id="div" class="mouse"></div>
<script>
var div = document.getElementById("div");
document.onclick = function () {
var e = event || window.event;
var pageX = e.pageX || e.clientX + document.documentElement.scrollLeft;
var pageY = e.pagey || e.clientY + document.documentElement.scrollTop;
//计算div的显示位置
var targetX = pageX - div.offsetWidth / 2;
var targetY = pageY - div.offsetHeight / 2;
//设置div的位置并让它显示
div.style.display = "block";
div.style.left = targetX + "px";
div.style.top = targetY + "px";
};
</script>
</body>
</html>
原创视频
