• 获取鼠标当前位置

    • clientY、clientX: 鼠标当前位置 相对于 浏览器可视区域顶部、浏览器可视区域左部 的位置;
    • pageY、pageX: 鼠标当前位置 相对于 文档顶部、文档左部的位置;
    • screenY、screenX:鼠标当前位置 相对于 屏幕顶部、屏幕左部的位置;
    • offsetY、offsetY:鼠标的当前位置 相对于 目标节点内填充边顶部、内填充边左部的位置。内填充边意思是不包含border,但包含padding,类似于padding-box。
    • 他们均是鼠标事件的一级属性 ,如e.clientY
  • 获取某一元素的区域

    Element.getBoundingClientRect()
    • 该方法获取的是该元素相对于视口的位置
    • top、bottom、left、right:分别是该元素的元素框(盒模型)上下左右位置距视口的距离。其中,top和bottom是距视口上边界的距离,left和right是距视口左边界的距离。
    • width、height:分别是该元素的元素框(盒模型)的宽度和高度,这个宽高是border以内并且包含border,类似于border-box

原生JS中获取位置的方案总结的更多相关文章

  1. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  2. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  3. 原生js中slice()方法和splice()区别

    slice()方法和splice()方法都是原生js中对数组操作的方法. slice(),返回一个新的数组,该方法可从已有的数组中返回选定的元素.例如:arrObject(start,end),sta ...

  4. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  5. js中的位置属性

    原生js中位置信息 clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框),实测,clientLeft=左侧边框的宽度,clientTop=顶部边框的宽度 ...

  6. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  7. js中获取URL中指定的查询字符串

    js中获取URL中指定的搜索字符串,主要利用location对象实现,废话少说,上代码. function getSearchString(key) { // 获取URL中?之后的字符 var str ...

  8. 【2017-06-27】Js中获取地址栏参数、Js中字符串截取

    一.Js中获取地址栏参数 //从地址栏获取想要的参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" ...

  9. ThinkPHP 中使用 IS_AJAX 判断原生 JS 中的 Ajax 出现问题

    问题: 在 ThinkPHP 中使用原生 js 发起 Ajax 请求的时候.在控制器无法使用 IS_AJAX 进行判断.而使用 jQuery 中的 ajax 是没有问题的. 在ThinkPHP中.有一 ...

随机推荐

  1. 艾编程coding老师课堂笔记:SpringBoot源码深度解析

    思想:有道无术,术尚可求,有术无道,止于术! Spring 开源框架,解决企业级开发的复杂性的问题,简化开发 AOP, IOC Spring 配置越来多,配置不方便管理! Javaweb---Serv ...

  2. 操作系统-1-存储管理之LFU页面置换算法(leetcode460)

    LFU缓存 题目:请你为 最不经常使用(LFU)缓存算法设计并实现数据结构.它应该支持以下操作:get 和 put. get(key) - 如果键存在于缓存中,则获取键的值(总是正数),否则返回 -1 ...

  3. VUE一款适用于pc平台的简单toast

    新项目要求用typescript+vue+elementui的模式来搭建pc项目,最初踩了好多坑.产品说提示不想用element-ui的提示. 打算用toast的形式.所以就自己写了一个pc的toas ...

  4. 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 ...

  5. go 编译protobuf

    D:\project\bin\protoc.exe --plugin=protoc-gen-go=%GOPATH%\bin\protoc-gen-go.exe --go_out=. *.proto 编 ...

  6. ssm整合简单例子

    1.首先新建一个maven项目 2.在pom.xml文件中加入以下代码引入包 <properties> <project.build.sourceEncoding>UTF-8& ...

  7. 中阶 d05 tomcat 安装 eclipse上配置tomcat

    eclipse使用参考 https://www.bilibili.com/video/av49438855/?p=24 1. 直接解压 ,然后找到bin/startup.bat 2. 可以安装 启动之 ...

  8. 31 Exception 异常处理

    /* * Exception in thread "main" java.lang.ArithmeticException: / by zero at com.itheima_01 ...

  9. "首字母变大写"组件:<capitalize> —— 快应用组件库H-UI

     <import name="capitalize" src="../Common/ui/h-ui/text/c_text_capitalize"> ...

  10. shell命令-if语句

    判断参数的个数 -ne 不等于 -eq 等于 -gt 大于 -lt 小于 -ge 大于等于 -le 小于等于 if [ "$#" -ne 1 ];then echo "n ...