//滚动条

 scrollLeft//滚动条距左边距离

 scrollTop//滚动条距顶部距离

 scrollWidth//滚动条元素的宽

 scrollHeight//滚动条元素的高

 //可视范围

 clientHeight//元素自身可视区域高

 clientTop

 //this.clientW = document.documentElement.clientWidth;//可视宽

 //this.clientH = document.documentElement.clientHeight;//可视高

 //鼠标

 event.offsetY  获取鼠标的高

 event.clientY  获取鼠标可视区域高

 //dom

 offsetTop//元素距顶部的距离

 offsetHeight//元素自身高

 window.getComputedStyle(elem).width(常用这个获取doc宽高兼容性高)

javascript js获取html元素各种距离方法的更多相关文章

  1. [JavaScript] js获取Html元素的实际宽度高度

    第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通 过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. ...

  2. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

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

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

  4. JS1 js获取dom元素方法

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

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

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

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  8. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  9. JavaScript设置获取和设置属性的方法

    这篇文章主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute.setAttribute的用法,需要的朋友可以参考下   getAttribute 该方法用来获取元素 ...

随机推荐

  1. 题解 LA3720

    题目大意 多组数据,每组数据给定两个整数 \(n,m\),请求出 \(n\times m\) 的点阵(即 \((n-1)\times(m-1)\) 的方格)中有多少条非水平竖直的经过至少两个格点的不同 ...

  2. 【一头扎进Spring】 01 | 从 HelloWorld 开始看Spring

    Spring 是一个开源框架. Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能. Spring 是一个 IOC(DI ...

  3. 借助 dp 公式去优化

    题目描述 一天,神犇和 LCR 在玩扑克牌.他们玩的是一种叫做“接竹竿”的游戏. 游戏规则是:一共有 nnn 张牌,每张牌上有一个花色 ccc 和一个点数 vvv,花色不超过 kkk 种.将这些牌依次 ...

  4. 切蛋糕（贪心 or 优先队列）

    链接:https://www.nowcoder.com/acm/contest/80/D来源:牛客网 最可爱的applese生日啦,他准备了许多个质量不同的蛋糕,想请一些同学来参加他的派对为他庆生,为 ...

  5. 嵩天老师python网课爬虫实例1的问题和解决方法

    一,AttributeError: 'NoneType' object has no attribute 'children', 网页'tbody'没有子类 很明显,报错的意思是说tbody下面没有c ...

  6. RabbitMQ入门（三）订阅模式

      在之前的文章RabbitMQ入门(二)工作队列中,我们创建了一个工作队列.工作队列背后的假设是每一项任务都被准确地传送至一个worker.在本文中,我们将会做一些不同的事情--我们将会把一个消息发 ...

  7. 「 从0到1学习微服务SpringCloud 」10 服务网关Zuul

    系列文章(更新ing): 「 从0到1学习微服务SpringCloud 」06 统一配置中心Spring Cloud Config 「 从0到1学习微服务SpringCloud 」07 RabbitM ...

  8. 玩转Django2.0---Django笔记建站基础十(二)(常用的Web应用程序)

    10.3 CSRF防护 CSRF(跨站请求伪造)也成为One Click Attack或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用,窃取网站的用户信息来制作 ...

  9. 机器学习环境配置系列四之theano

    决定撰写机器学习环境配置的主要原因就是因为theano的配置问题,为了能够用上gpu和cudnn加速,我是费劲了力气,因为theano1.0.0在配置方面出现了重大改变,而网上绝大多数都很老,无法解决 ...

  10. Mabitis

    Mybatis 一.框架概念: Java框架,一个软件半成品,简单来说就是一个别人搭好的舞台,你来做表演,说白了Java框架就是封装好方便程序员操作的类,使项目的开发更简单,维护起来也更容易. 而My ...