1）html节点在可视区域的位置

obj.getBoundingClientRect().top

obj.getBoundingClientRect().left

2) 获取鼠标按下的位置

event.clientX

event.clientY

3) html节点在父元素里的位置

obj.offsetTop

obj.offsetLeft

obj.offsetHeight   元素的高度

obj.offsetWidth    元素的宽度

js获取html元素在可视区域的位置的更多相关文章

  1. ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力。

    ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果,帮助你的网站增加吸引力. 1.http://www.yangqq.com/jstt/css3/2017-08-08/787. ...

  2. javascript js获取html元素各种距离方法

    //滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 cli ...

  3. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  4. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  5. 使用js获取伪元素的content

    在测试过程中有时候会遇到反爬虫机制,一些元素会使用伪元素,这样在定位元素的时候会定位不到,这时候就要使用js来帮助定位,获取到想要的元素 下面是部分代码 //使用js获取伪元素的content Str ...

  6. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  7. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  8. 获取某个元素相对于视窗的位置-getBoundingClientRect

    1. getBoundingClientRect用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. 语法:这个方法没有参数 rectObject = ...

  9. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

随机推荐

  1. JavaScript 数组插入元素并排序

    1.插入类排序 插入类排序的思想是:在一个已排好序的序列区内,对待排序的无序序列中的记录逐个进行处理,每一步都讲待排序的记录和已排好的序列中的记录进行比较,然后有序的插入到该序列中,直到所有待排序的记 ...

  2. [macOS] PHP双版本，5.6跟7.1

    转过来的,原文看这里,https://www.symfony.fi/page/how-to-run-both-php-5-6-and-php-7-x-with-homebrew-on-os-x-wit ...

  3. https学习笔记二----基础密码学知识和python pycrypto库的介绍使用

    在更详细的学习HTTPS之前,我也觉得很有必要学习下HTTPS经常用到的加密编码技术的背景知识.密码学是对报文进行编解码的机制和技巧.可以用来加密数据,比如数据加密常用的AES/ECB/PKCS5Pa ...

  4. Mysql模糊查询like效率，以及更高效的写法

    在使用msyql进行模糊查询的时候,很自然的会用到like语句,通常情况下,在数据量小的时候,不容易看出查询的效率,但在数据量达到百万级,千万级的时候,查询的效率就很容易显现出来.这个时候查询的效率就 ...

  5. 解决tomcat重启时报严重: Exception loading sessions from persistent storage的问题

    很多项目在重启时会报:严重: Exception loading sessions from persistent storage的问题.该问题的原因是tomcat的session持久化机制引起的,t ...

  6. Solution about MB STAR C4, MB STAR C5 Update and can not test vehicles problems

    Solution about MB Star C4, MB Star C5 Update and can not test vehicles problems 1. Make sure your co ...

  7. (转) SpringMVC学习笔记-

    一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--conf ...

  8. python学习教程,史上最全面的python学习路线图

    Python 是Web 开发.游戏脚本.计算机视觉.物联网管理和机器人开发的主流语言之一,随着Python用户可以预期的增长,它还有机会在多个领域里登顶.Python学习路线分享给你. 阶段一是Pyt ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  10. 高度自适应不能触发transition的解决方法

    1. 前言  在我们不能确定一个元素的高度的时候,要使用transition过渡,是不会触发的,比如一个p标签 内容行数不固定  我们可能就要初始 height: 0 ; 过渡到 height: au ...