原生JS中获取位置的方案总结
获取鼠标当前位置
- clientY、clientX: 鼠标当前位置 相对于
浏览器可视区域顶部、浏览器可视区域左部
的位置; - pageY、pageX: 鼠标当前位置 相对于
文档顶部、文档左部
的位置; - screenY、screenX:鼠标当前位置 相对于
屏幕顶部、屏幕左部
的位置; - offsetY、offsetY:鼠标的当前位置 相对于
目标节点
的内填充边顶部、内填充边左部
的位置。内填充边意思是不包含border,但包含padding,类似于padding-box。 - 他们均是鼠标事件的一级属性 ,如e.clientY
- clientY、clientX: 鼠标当前位置 相对于
获取某一元素的区域
Element.getBoundingClientRect()
- 该方法获取的是该元素相对于
视口
的位置 - top、bottom、left、right:分别是该元素的元素框(盒模型)上下左右位置距视口的距离。其中,top和bottom是距
视口上边界
的距离,left和right是距视口左边界
的距离。 - width、height:分别是该元素的元素框(盒模型)的宽度和高度,这个宽高是border以内并且包含border,类似于
border-box
。
- 该方法获取的是该元素相对于
原生JS中获取位置的方案总结的更多相关文章
- 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- 原生js中slice()方法和splice()区别
slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...
- JS中获取元素属性的逆天大法
给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...
- js中的位置属性
原生js中位置信息 clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框),实测,clientLeft=左侧边框的宽度,clientTop=顶部边框的宽度 ...
- 原生JS中apply()方法的一个值得注意的用法
今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...
- js中获取URL中指定的查询字符串
js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...
- 【2017-06-27】Js中获取地址栏参数、Js中字符串截取
一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...
- ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题
问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...
随机推荐
- 艾编程coding老师课堂笔记:SpringBoot源码深度解析
思想:有道无术,术尚可求,有术无道,止于术! Spring 开源框架,解决企业级开发的复杂性的问题,简化开发 AOP, IOC Spring 配置越来多,配置不方便管理! Javaweb---Serv ...
- 操作系统-1-存储管理之LFU页面置换算法(leetcode460)
LFU缓存 题目:请你为 最不经常使用(LFU)缓存算法设计并实现数据结构.它应该支持以下操作:get 和 put. get(key) - 如果键存在于缓存中,则获取键的值(总是正数),否则返回 -1 ...
- VUE一款适用于pc平台的简单toast
新项目要求用typescript+vue+elementui的模式来搭建pc项目,最初踩了好多坑.产品说提示不想用element-ui的提示. 打算用toast的形式.所以就自己写了一个pc的toas ...
- 1019 General Palindromic Number (20 分)
A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...
- go 编译protobuf
D:\project\bin\protoc.exe --plugin=protoc-gen-go=%GOPATH%\bin\protoc-gen-go.exe --go_out=. *.proto 编 ...
- ssm整合简单例子
1.首先新建一个maven项目 2.在pom.xml文件中加入以下代码引入包 <properties> <project.build.sourceEncoding>UTF-8& ...
- 中阶 d05 tomcat 安装 eclipse上配置tomcat
eclipse使用参考 https://www.bilibili.com/video/av49438855/?p=24 1. 直接解压 ,然后找到bin/startup.bat 2. 可以安装 启动之 ...
- 31 Exception 异常处理
/* * Exception in thread "main" java.lang.ArithmeticException: / by zero at com.itheima_01 ...
- "首字母变大写"组件:<capitalize> —— 快应用组件库H-UI
 <import name="capitalize" src="../Common/ui/h-ui/text/c_text_capitalize"> ...
- shell命令-if语句
判断参数的个数 -ne 不等于 -eq 等于 -gt 大于 -lt 小于 -ge 大于等于 -le 小于等于 if [ "$#" -ne 1 ];then echo "n ...