1. 元素偏移量offset

1.1 offset介绍

offset：偏移量,可以利用offset动态的获取元素在页面中的位置大小信息。

属性	说明
offsetLeft	返回元素相对于带有定位的父元素左边框的偏移
offsetTop	返回元素相对于其带有定位的元素上方的偏移
offsetWidth	返回自身宽度(包括padding、边框和内容区域的宽度)，返回值不带单位
offsetHeight	返回自身高度(包括padding、边框和内容区域的高度)，返回值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素

1.2 获取鼠标位置

获取鼠标位置： 鼠标指针在盒子内的坐标位置示意图分析。

<!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>offset</title>
</head>
<style>#box{background-color: hotpink;width: 200px;height: 200px;position: absolute;left: 50px;top: 20px;}
</style>
<body><div id="box"></div><script>console.log('宽度：'+box.offsetWidth);console.log('高度：'+box.offsetHeight);//给box绑定鼠标移动事件box.onmousemove = function(e){//参数e代表事件对象 在这里表示mouseEvent//获取box盒子的偏移量var left = box.offsetLeft;var top = box.offsetTop;console.log('左边偏移量：'+left);console.log('顶部偏移量：'+top);//获取鼠标指针在盒子box内部的坐标var x = e.pageX - left;var y = e.pageY - top;console.log(x,y);}</script>
</body>
</html>

1.3 模态框拖曳效果

案例展示：

案例分析设计图：

<!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>
</head>
<style>/* 遮罩层样式 */.login-bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #ccc;display: none;}/* 模块框样式 */.model{width: 500px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: none;box-shadow: 0px 0px 20px #ddd;z-index: 999;cursor: move;}.model form{display: flex;flex-direction: column;height: 100%;width: 100%;}.model form .item1{flex: 1;display: flex;justify-content: center;align-items: center; font-weight: bold; }.model form .item2{margin: 0 auto;width: 70%;display: flex;flex: 1;flex-direction: column;justify-content: space-around;align-items: center;}.username{margin-left: 16px;}.vip{border: 1px solid #ccc;border-radius: 20px;padding: 3px 40px;background-color: orange;color: #fff;}.close{position: absolute;right: -10px;top: -10px;border: 1px solid #ccc;width: 20px;height: 20px;text-align: center;line-height: 17px;border-radius: 50%;background-color: white;}/* 单击弹出遮罩层样式 */.login-header{width: 100%;text-align: center;font-size: 20pt;position: absolute;}
</style>
<body><!-- 遮罩层 --><div class="login-bg"></div><!-- 模块框 --><div class="model"><form><div class="item1">登录会员</div><div class="item2"><div class="username"><label for="username">用户名：</label><input type="text" name="username"></div><div><label for="password">登录密码：</label><input type="text" name="password"></div></div><div class="item1"><div class="vip">登录会员</div></div></form><!-- 模块框关闭按钮 --><div class="close">x</div></div><!-- 单击弹出遮罩层 --><div class="login-header">单击，登录会员....</div><script>//获取元素对象var model = document.querySelector('.model');var close = document.querySelector('.close');var login = document.querySelector('.login-header');var bg = document.querySelector('.login-bg');//单击弹出遮罩层和模块框login.addEventListener('click',function(){model.style.display = 'block';bg.style.display = 'block';model.style.backgroundColor = 'white';});//单击关闭模块close.addEventListener('click',function(){model.style.display = 'none';bg.style.display = 'none';});//拖动模块框model.addEventListener('mousedown',function(e){//当鼠标按下，获取鼠标在模块框中的坐标var x = e.pageX - model.offsetLeft;var y = e.pageY - model.offsetTop;//定义事件回调函数var move = function(e){model.style.left = e.pageX - x + 'px';model.style.top = e.pageY - y + 'px';};//鼠标按下，触发鼠标移动事件document.addEventListener('mousemove',move);//鼠标抬起，移除鼠标移动事件document.addEventListener('mouseup',function(e){document.removeEventListener('mousemove',move)})})</script>
</body>
</html>

2. 元素可视区client

client：客户端，通过client可以获取元素在浏览器可视区的相关信息。

属性	说明
clientTop	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身宽度(包括padding、边框和内容区域的宽度)，返回值不带单位
clientHeight	返回自身高度(包括padding、边框和内容区域的高度)，返回值不带单位


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;border: 10px solid red;padding: 10px;}</style><body><div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div><script>var div = document.querySelector('div');console.log('元素左边框大小:',div.clientLeft);console.log('元素上边框大小:',div.clientTop)console.log('元素自身宽度:',div.clientWidth)console.log('元素自身高度:',div.clientHeight)</script></body>
</html>

3. 元素滚动scroll

属性	说明
元素.scrollWidth	获取元素的实际内容宽
元素.scrollHeight	获取元素的实际内容高
元素.scrollTop	元素被卷去的高
元素.scrollLeft	元素被卷去的宽


<!DOCTYPE html><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;overflow: auto;border: 10px solid red;padding: 10px;}</style><body><div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div><script>var div = document.querySelector('div');console.log("元素内容的高度："+div.scrollHeight);console.log('元素内容的宽度：'+div.scrollWidth)div.onscroll = function () {console.log('被卷的左侧距离：'+div.scrollLeft)console.log('被卷的上方距离：'+div.scrollTop)};</script></body>
</html>

【JavaScript】offset、client、scroll相关推荐

【JavaScript】JS的变量、数组、计算器案例、函数、类、常用对象的方法
目录 01-js-js的声明和引入 <!DOCTYPE html> <html><head><meta charset="UTF-8"&g ...
【 javascript】JS语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性
JS语法 ES6.ES7.ES8.ES9.ES10.ES11.ES12新特性前言 ES6(2015) 1. 类(class) 2. 模块化(ES Module) 3. 箭头函数 4. 函数参数默认值 ...
【JavaScript】全面解析offsetLeft、offsetTop
前言:偏移量,很多动画效果的实现都是通过去改变偏移量的改变来实现的,但是你真的完全了解offsetLeft,offsetTop吗? 一.第一个小例子 <body> <style> ...
【javascript】js实现复制、粘贴
使用document.ExecCommand("copy")命令,官方文档,点我. 例如: <!DOCTYPE html> <html> <head& ...
【javascript】简单原型链、借用构造函数
javascript中继承(实现继承)的方式--简单原型链 1 .简单原型链事例 function Super() { }; Super.prototype = { ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
【javascript】对原型对象、原型链的理解
原型对象,原型链这些知识属于基础类知识.但是平时开发过程中也很少用到. 看网上的意思,原型链用于es5开发场景下的继承.es6有了类语法糖之后,就自带继承了. 通过理解,个人画了一张原型链解构的关系图 ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
【JavaScript】事件
所谓事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间一.事件流在页面上,单击某个元素的同时,也单击了它的包含容器.事件流就是描述的从页面中接收事件的顺序.IE是事件冒泡流,Netscape是事 ...

【JavaScript】offset、client、scroll

1. 元素偏移量offset

1.1 offset介绍

1.2 获取鼠标位置

1.3 模态框拖曳效果

2. 元素可视区client

3. 元素滚动scroll

【JavaScript】offset、client、scroll相关推荐

最新文章

热门文章