发表于： 2023-01-02 20:48:13
0 179
今天的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset系列</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
/*position: relative;*/
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
}
.son {
width: 100px;
height: 100px;
background-color: deepskyblue;
margin-left: 45px;
}
.w {
width: 200px;
height: 200px;
background-color: pink;
margin: 0 auto 200px;
padding: 10px;
border: 15px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<div class="w"></div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son');
// 1、可以得到元素的偏移 位置 返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
//它以带有定位的父亲为准 如果没有父亲或者父亲没有定位 则 以 body 为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2、可以得到元素的大小 宽度和高度 是包含 padding + border + width
console.log(w.offsetWidth);
console.log(w.offsetHeight);
//3、返回带有定位的父亲 否则返回的是body
console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
console.log(son.parentNode); //parentNode 是返回最近一级的父亲 不管父亲有没有定位
// offset系列是只读属性，只能获取元素的宽度，而 style 可以通过赋值修改元素样式。
// 以后想要获取元素大小位置 用offset更合适 ，想要给元素更改值，则用 style 改变
console.log(son.style.white);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
// box.addEventListener('click', function (e) {
// // console.log(e.pageX);
// // console.log(e.pageY);
// // console.log(box.offsetTop);
// // console.log(box.offsetLeft);
// var x = e.pageX - this.offsetLeft;
// var y = e.pageY - this.offsetTop;
// // var b1 = box.offsetTop;
// // var b2 = box.offsetLeft;
// this.innerText = 'x的坐标是' + x + ' ' + 'y的坐标是' + y;
// })
// mousemove 鼠标移动事件事件
box.addEventListener('mousemove', function (e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
this.innerText = 'x的坐标是' + x + ' ' + 'y的坐标是' + y;
})
</script>
</body>
</html>
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动模态框</title>
<style>
* {
margin: 0;
padding: 0;
}
.login-header {
font-size: 18px;
text-align: center;
font-weight: bolder;
}
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;
height: 40px;
line-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 solid 1px;
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-input a {
display: block;
}
.login-input input.list-input {
float: left;
line-height: 35px;
height: 35px;
width: 350px;
border: #ebebeb solid 1px;
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="text" placeholder="请输入密码" name="info[username]" 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>
//1、获取元素
var login = document.querySelector('.login');
var mask = document.querySelector('.login-bg');
var link = document.querySelector('#link');
var closeBtn = document.querySelector('#closeBtn');
var title = document.querySelector('#title');
//2、 点击弹出层这个链接 link 让 mask和login 显示出来
link.addEventListener('click', function () {
mask.style.display = 'block';
login.style.display = 'block';
})
//3、 点击 closeBtn 这个链接 让 mask和login 起来
closeBtn.addEventListener('click', function () {
mask.style.display = 'none';
login.style.display = 'none';
})
//4、鼠标拖拽
//(1) mousedown 鼠标按下 获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
//(2) mousemove 鼠标移动 把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的 left和top值
document.addEventListener('mousemove', move);
function move(e) {
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
//(3) mouseup 鼠标弹起 就让鼠标移动事件移除
document.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
})
})
</script>
</body>
</html>
返回列表
评论