//滚动条

 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. java架构之路（多线程）大厂方式手写单例模式

    上期回顾: 上次博客我们说了我们的volatile关键字,我们知道volatile可以保证我们变量被修改马上刷回主存,并且可以有效的防止指令重排序,思想就是加了我们的内存屏障,再后面的多线程博客里还有 ...

  2. TCP/IP协议与HTTP协议（二）

    TCP/IP协议是传输层协议,主要解决数据如何在网络中传输,而HTTP是应用层协议,主要解决如何包装数据. 1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过 ...

  3. java架构之路（多线程）JUC并发编程之Semaphore信号量、CountDownLatch、CyclicBarrier栅栏、Executors线程池

    上期回顾: 上次博客我们主要说了我们juc并发包下面的ReetrantLock的一些简单使用和底层的原理,是如何实现公平锁.非公平锁的.内部的双向链表到底是什么意思,prev和next到底是什么,为什 ...

  4. Nest.js你学不会系列-初识Nest

    前言 最近在学习研究 Nest 框架,但是在学习过程中除了参考翻阅官方文档外国内几乎没有多少资料能系统的讲解 Nest 的相关内容,所以打算想通过我自己学习的角度讲解下 Nest 框架,不知道能坚持多 ...

  5. 使用使用django-cors-headers解决跨域问题

    安装 pip3 install -i https://pypi.douban.com/simple django-cors-headers 注册App INSTALLED_APPS = [ ... ' ...

  6. 【转】在VS2010上使用C#调用非托管C++生成的DLL文件（图文讲解）

    原文:http://www.cyqdata.com/cnblogs/article-detail-35876# 背景 在项目过程中,有时候你需要调用非C#编写的DLL文件,尤其在使用一些第三方通讯组件 ...

  7. AVR单片机教程——矩阵键盘

    本文隶属于AVR单片机教程系列.   开发板上有4个按键,我们可以把每一个按键连接到一个单片机引脚上,来实现按键状态的检测.但是常见的键盘有104键,是每一个键分别连接到一个引脚上的吗?我没有考证过, ...

  8. 工具之wc

    wc命令的功能为统计指定文件中的字节数.字数.行数, 并将统计结果显示输出. 语法:wc [选项] 文件… 说明:该命令统计给定文件中的字节数.字数.行数.如果没有给出文件名,则从标准输入读取.wc同 ...

  9. Linux 常用工具sysstat之sar

    sysstat包 iostat.sar.sa1和sa2命令都是sysstat包的一部分.它是Linux包含的性能监视工具集合: sar:收集.报告或存储信息(CPU.内存.磁盘.中断.网卡.TTY.内 ...

  10. ROS机器人之话题(一)

     将消息发布到话题上 首先建立一个basic包(名称自己定)其命令为: 1.创建功能包,应用catkin_create_pkg命令     cd  ~/catkin_ws/src #切换到代码空间,也 ...