JS基础学习:三大系列offset、scroll、client
2019-04-14 本文已影响0人
Merbng
offset系列
父级元素margin+父级元素padding+父级元素border+自己的margin
-
offsetLeft
元素距离左边位置的值 -
offsetTop
元素距离上面位置的值 -
offsetWidth
获取元素的宽度（有边框） -
offsetHeight
获取元素的高度（有边框）
scroll系列
-
scrollLeft
元素向左卷曲出去的距离 -
scrollTop
元素向上卷曲出去的距离 -
scrollWidth
元素中内容的实际的宽度，如果没有内容，或者内容很少，元素的宽度 -
scrollHeight
元素中内容的实际的高度，如果没有内容，或者内容很少，元素的高度
client系列
-
clientWidth
可视区域的宽度，没有边框 -
clientHeight
可视区域的高度，没有边框 -
clientLeft
左边框的宽度 -
clientTop
上边框的宽度 -
clientX
可视区域的横坐标 -
clientY
可视区域的纵坐标
案例：图片跟着鼠标飞
<!DOCTYPE html>
<html lang="zh">
<head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
height: 11111px;
}
img {
position: absolute;
}
</style>
</head>
<body>
<img id="img" src="images/tianshi.gif">
<script src="js/common.js"></script>
<script type="text/javascript">
// 文档的鼠标移动事件
// 通过argument.length 可以得出,
// 事件处理函数中有一个参数,
// 这个参数和事件有关系,是一个对象--->事件参数对象
// 谷歌和火狐 都有这个事件参数对象, IE8没有
//事件参数对象:e --- 在IE8中用 window.event 来代替
// pageX 和pageY 在谷歌和火狐可以用, IE8 不支持
document.onmousemove = function(e) {
//兼容代码
e = window.event || e;
// console.log(arguments.length);
// console.log(e);
// console.log(window.event);
document.title = e.clientX + "----" + e.clientY;
// 可视区域的横坐标
// my$('im').style.left = e.clientX + "px";
// my$('im').style.left = e.pageX + "px";
my$("img").style.left = (e.clientX + getScroll().left) + "px";
console.log((e.clientX + getScroll().left) + "px")
// 可视区域的纵坐标
// my$('im').style.top = e.clientY + "px";
// my$('im').style.top = e.pageY + "px";
my$("img").style.top = (e.clientY + getScroll().top) + "px";
};
</script>
</body>
</html>
