1.offset我们可以动态的获取该元素的位置，大小等
1.1获取元素距离带有定位父元素的位置
1.2获取元素自身的大小（宽度和高度
1.3注意：返回的数值都不带单位
2.常用属性
元素.offsetParent 返回该元素带有定位的父级元素，如果父级都没定位，返回body
元素offsetTop 返回元素带有定位父元素的上方偏移
元素offsetleft 返回元素带有定位父元素的左边偏移元素
元素offsetWidth 返回元素自身包含padding,边框和内容，返回值不带单位
元素offsetHeight 返回元素自身包含padding,边框和内容，返回值不带单位
3.offset 和 style的区别
offset 可以得到任意样式表中的样式值 而 style 只能得到行内样式表中的样式值
offset 系列获得的数值是没有单位的 而 style获取到的都要有px单位
offsetWidth 包含padding+border+width 而 style 只获取width的值 offsetWidth 等属性是只读属性，只能获取不能赋值 而 style可以获取,也可以赋值行内样式
所以，我们想要获取元素大小位置，用offset更合适 而 设置值可以用style来设置
4.获取鼠标在盒子里面的坐标,这个是不错的案例
<!DOCTYPE html>
<html lang="en">
<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>获取鼠标在盒子里面的坐标</title>
<style type="text/css">
div{
width: 400px;height: 400px;
background-color: aqua;
margin: 100px 0px 0px 100px;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
// 1.首先在盒子里面点击，我们需要知道鼠标点击距离盒子的左右距离
var div = document.querySelector('div');
div.addEventListener('click',function(e){
var pageX = e.pageX -this.offsetLeft ; // 鼠标在页面中的X位置 - 我们需要得到鼠标在盒子中的位置
var pageY = e.pageY -this.offsetTop; // 鼠标在页面中的Y位置 -我们需要得到鼠标在盒子中的位置
// 3.我们把输在在网页中的距离 减 在盒子中的位置 就是 鼠标在盒子里的相对位置
console.log('我在页面x位置：'+pageX + ',我在页面y的位置:'+pageY);
})
</script>
</body>
</html>
- JS拖动拖动模态框的案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JavaScript实现模态框拖拽效果</title>
<style>
.login-header {
width: 100%;
text-align: center;
height: 30px;
font-size: 24px;
line-height: 30px;
}
ul,
li,
ol,
dl,
dt,
dd,
div,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
a {
padding: 0px;
margin: 0px;
}
.login {
display: none;
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background: #ffffff;
box-shadow: 0px 0px 20px #ddd;
z-index: 9999;
transform: translate(-50%, -50%);
}
.login-title {
width: 100%;
margin: 10px 0px 0px 0px;
text-align: center;
line-height: 40px;
height: 40px;
font-size: 18px;
position: relative;
cursor: move;
}
.login-input-content {
margin-top: 20px;
}
.login-button {
width: 50%;
margin: 30px auto 0px auto;
line-height: 40px;
font-size: 14px;
border: #ebebeb 1px solid;
text-align: center;
}
.login-bg {
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .3);
}
a {
text-decoration: none;
color: #000000;
}
.login-button a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb 1px solid;
text-indent: 5px;
}
.login-input {
overflow: hidden;
margin: 0px 0px 20px 0px;
}
.login-input label {
float: left;
width: 90px;
padding-right: 10px;
text-align: right;
line-height: 35px;
height: 35px;
font-size: 14px;
}
.login-title span {
position: absolute;
font-size: 12px;
right: -20px;
top: -30px;
background: #ffffff;
border: #ebebeb solid 1px;
width: 40px;
height: 40px;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
<div id="login" class="login">
<div id="title" class="login-title">登录会员
<span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
</div>
<div class="login-input-content">
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
<script type="text/javascript">
// 注册模态框
var login = document.querySelector('.login');
// 注册遮盖层
var login_bg = document.querySelector('.login-bg');
// 1.点击弹出层 模态框和遮挡层就会显示出来 displaly :blcok
var login_header = document.querySelector('.login-header');
login_header.addEventListener('click',function(){
login.style.display = 'block';
login_bg.style.display = 'block';
})
// closeBtn 点击关闭 就可以关闭模态框和遮盖层
var close_login = document.querySelector('.close-login');
close_login.addEventListener('click',function(){
login.style.display = 'none';
login_bg.style.display = 'none';
})
// 触发事件 我们按下mousedow 移动mousemove 松开 mouseup
//1.注册事件 id 为title 标题
var login_title =document.querySelector('.login-title');
login_title.addEventListener('mousedown',function (e){
// 1.鼠标按下 获得鼠标在盒子内的坐标
// 鼠标的坐标 减去 鼠标在盒子内的坐标， 才是模态框真正的位置。
var X = e.pageX - login.offsetLeft;
var Y = e.pageY - login.offsetTop;
console.log( e.pageX,e.pageY,X,Y)
// 2.鼠标移动，就让模态框的坐标 设置为 ： 鼠标坐标 减去盒子坐标即可，注意移动事件写到按下事件里面。
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>
</html>
