一.offset
offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移),大小等
- 获取元素距离带有定位父元素的位置
- 获取元素自身的大小(宽度高度)
- 注意:返回值都不带单位
常用属性:
1.1 offsetX,offsetY
获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX (offsetY)规定了事件对象与目标节点的内填充边(padding edge)在 X (Y)轴方向上的偏移量。
2.2 offsetWidth,offsetHeight
它们都是只读属性,返回一个元素的布局宽度或高度。如果是标准盒子模型那么:
宽度:width + padding + border + scrollbar(如果横向滚动条存在)
高度:height + padding + border + scrollbar(如果纵向滚动条存在)
如果是怪异盒子模型(IE模型,可以通过box-sizing:border-box;设置):
宽度:width
高度:height
二.client
client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client系列的相关属性可以动态的得到该元素得边框大小,元素大小等
<div class="test">
</div>
.test {
width: 100px;
height: 100px;
background-color: aqua;
border: 3px solid;
}
var test = document.querySelector(".test")
console.log(test.clientLeft)
console.log(test.clientWidth)
2.1 clientX,clientY
鼠标相对于当前视口的x/y坐标, 不不考虑页面滚动的距离。(以视口左上角为原点)
鼠标事件:
var test = document.querySelector(".test")
test.addEventListener("click", function (e) {
console.log(e.clientX + " " + e.clientY)
})
三.scroll
scroll翻译过来就是滚动的,我们使用scroll系列的相关属性可以动态的获取该元素的大小,滚动距离等
四.screen
Screen 对象包含有关客户端显示屏幕的信息。
screen.availHeight:返回屏幕的高度(不包括windows任务栏)
screen.alvailWidth:返回屏幕的宽度(不包括windows任务栏)
screen.width:返回屏幕的总宽度
screen.height:返回屏幕的总高度
五.page
5.1 pageX,pageY
pageX和pageY获取的是鼠标指针距离文档(HTML)的左上角距离,不会随着滚动条滚动而改变;
pageX,pageY和offsetX,offsetY的区别:
pageX pageY:鼠标指针的位置,文档的坐标。
offsetX offsetY:鼠标相对于事件源元素的x,y坐标
六.鼠标事件
七.案例:鼠标拖动
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.logIn {
position: relative;
width: 500px;
height: 400px;
margin: 100px auto;
/* border: 1px solid black; */
background-color: aqua;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}
input {
display: block;
width: 400px;
height: 25px;
margin: 25px auto;
}
.title {
width: 500px;
height: 50px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<div class="logIn">
<p class="title">登录界面</p>
<form action="">
<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码">
</form>
</div>
<script>
var title = document.querySelector(".title")
var logIn = document.querySelector(".logIn");
//在title区域按下鼠标,移动登录界面
title.addEventListener("mousedown", function (e) {
var pageX = e.pageX;
var pageY = e.pageY;
var offX = title.offsetTop;
var offY = title.offsetLeft;
var x = pageX - offX; //鼠标离title元素的相对x位置
var y = pageY - offY; //鼠标离title元素的相对y位置
//鼠标移动,把鼠标在页面中的坐标减去鼠标在盒子内的坐标,就是logIn的top和left值
document.addEventListener("mousemove", move);
function move(e) {
logIn.style.left = e.pageX - x + "px";
logIn.style.top = e.pageY - y + "px";
}
//鼠标弹起,让鼠标移动事件移除
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", move);
})
})
</script>
</body>