1. //滚动条
  2. scrollLeft//滚动条距左边距离
  3. scrollTop//滚动条距顶部距离
  4. scrollWidth//滚动条元素的宽
  5. scrollHeight//滚动条元素的高
  6.  
  7. //可视范围
  8. clientHeight//元素自身可视区域高
  9. clientTop
  10. //this.clientW = document.documentElement.clientWidth;//可视宽
  11. //this.clientH = document.documentElement.clientHeight;//可视高
  12.  
  13. //鼠标
  14. event.offsetY 获取鼠标的高
  15. event.clientY 获取鼠标可视区域高
  16.  
  17. //dom
  18. offsetTop//元素距顶部的距离
  19. offsetHeight//元素自身高
  20. 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. Python Django配置Mysql数据库

    1 在项目中找到setting文件 打开 2 在里面找到 3 将Databases里面的数据改成 DATABASES = { 'default': { #引擎设置为Mysql 'ENGINE': 'd ...

  2. RocketMQ客户端加载流程

     这节介绍RocketMQ客户端的启动流程,即Consumer和Producer的启动流程. 1. 客户端demo  首先先看下客户端的demo Producer: public class Sync ...

  3. Spring学习记录3——Spring AOP

    SpringAOP基础 AOP简介: AOP是Aspect Oriented Programing的简称,翻译为“面向切面编程”.它适用于具有横切逻辑的应用场合,如性能检测,访问控制,事务管理及日志记 ...

  4. dp - 循环数组的最大和

    首尾相连数组的最大子数组和 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 给定一个由N个整数元素组成的数组arr,数组中有正数也有负数,这个数组不是一般的数组,其首尾是 ...

  5. 轻松弄懂var、let、const之间的区别

    ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,于2015年6月正式发布,也称ECMAScript 2015. ES6的好处 ES6的出现为我们前端带来了很多方便之处,以 ...

  6. 元素定位工具Weditor的使用

    (1).安装:pip install --pre --upgrade weditor 安装成功 (2).启动python -m weditor

  7. Ubuntu 设置中文输入法

    环境:新安装的Ubuntu 16.04 LTS 本来打算使用sogou拼音,但是在输入后的提示框中内容为乱码,因此尝试重新安装. 1.sudo apt-get remove sogoupinyin & ...

  8. redis 支持事务

    pipe = conn.pipeline(transaction=True) pipe.multi() pipe.set(') pipe.hset('k3','n1',666) pipe.lpush( ...

  9. prometheus和zabbix的对比

    前言: 新公司要上监控,面试提到了Prometheus 是公司需要的监控解决方案,作为喜新厌旧的程序员,我当然是选择跟风了,之前主要做的是zabbix,既然公司需要prometheus,那没办法,只能 ...

  10. C#的WinForm窗体美化

    为了帮助用户追求美观,.NET 4.0 专门为对此有需求的人提供了IrisSkin4.dll皮肤引用集,里面封装了许多对窗体重新描绘的方法,再搭配上WinForm特有的 .ssk 文件,就可以实现窗体 ...