javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

javascript中获取dom元素的高度和宽度的更多相关文章

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

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

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

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

  3. JavaScript中获取HTML元素的方式

    JavaScript中获取HTML元素的方式 1.使用id方式获取元素,返回一个具体对象   document.getElementById(id名) 2.使用className方式获取元素,返回类数 ...

  4. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  5. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  6. JavaScript中获取html元素常用手法和区分

    对于许多前端开发项目来说,获取元素进行操作是必不可少的,例如tab标签,全屏切换,自动滚播等效果都需要通过获取节点元素来实现.下面我来总结下JavaScript最常用的4个Document对象中获取元 ...

  7. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  8. JavaScript获取DOM元素位置和尺寸大小

      在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScri ...

  9. angular学习笔记-angular中怎么获取dom元素

    步骤分解: 第一步:给要获取的元素一个ng-model变量,并且绑定事件啦! <div class="home" ng-model="dirName" n ...

随机推荐

  1. kafka集群参数解析server.properties

    #server.properties配置文件 broker.id=1 port=9092 host.name=url1 zookeeper.connect=url1:2181,url2:2181,ur ...

  2. Scala学习笔记（一）

    scala 版HelloWorrld object HelloWorld{ def main(args:Array[String]){ println("Hello World!!!&quo ...

  3. Linux shell 脚本（二）

    转载请标明出处:  http://blog.csdn.net/zwto1/article/details/45078837:  本文出自:[明月的博客] 五.字符串处理 1.子串截取操作: 路径分割: ...

  4. NodeJS 远程连接windows 上的MongoDB

    ---恢复内容开始--- 在购买了腾讯云主机,部署了nodejs项目之后,发现没有mongo数据库,于是在官网上下载了最新版的mongo数据库.然后就有了下边的一系列问题. 1.先说说基础配置吧. 1 ...

  5. c++代码的编译

    1.gcc和g++     1.1搞清楚几个名字         GCC :GNU Compiler Collection (GUN编译套件),可以编译c,c++,java,objective-c,F ...

  6. 《Linux命令行与shell脚本编程大全》- 读书笔记1 - 基本的bash shell 命令

    这本书买了好久了,除了刚到手的那几天翻看了一下以外,竟然到今天都没有看过.突然想要写一个shell脚本,发现什么也不会,是时候开始学习了,今天先把最简单的一章再看一遍顺便做一些笔记,明天继续后面的! ...

  7. 笔记：Hibernate DML

    Hibernate 提供的HQL(Hibernate Query Language)语句也支持批量 update 和 delete 语法,语法格式如下: [UPDATE | DELETE] FROM ...

  8. [bzoj1601]灌水_kruskal

    灌水 bzoj-1601 题目大意:给你n块地,将两块地之间连通有代价$P_{i,j}$,单独在一块地打井需要代价$C_i$,问将所有的井都有水的代价是多少. 注释:1<=n<=300. ...

  9. java中equals与==的区别

    http://blog.csdn.net/zfrong/article/details/4290904

  10. CSS的盒子模型有哪些，区别是什么

    1)盒模型: 内容(content).填充(padding).边界(margin). 边框(border)   2)有两种, IE 盒子模型.标准 W3C 盒子模型:IE的content部分包含了 b ...