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. 三方面搞定http协议之“状态码”

    当我们向服务器请求数据的时候,服务器会给我们一个反馈,告诉我们对待我们的请求,服务器处理得怎么样了,而这个反馈,是通过数字来传达的,这个数字就叫状态码. 状态码分为以下几种: 1xx:指示信息--表示 ...

  2. Sharepoint Management Shell命令

    1.普通WSP包,没有特殊激活内容 安装BBA.WebParts.wsp 1)   Add-SPSolution -LiteralPath "c:\BBA.WebParts.wsp" ...

  3. Problem : 1196 ( Lowest Bit )

    第一次一次通过,逻辑太简单... #include<iostream> using namespace std; void main() { int n; while(cin>> ...

  4. 设计模式——观察者模式（C++实现）

    #include <iostream> #include <vector> #include <algorithm> #include <iterator&g ...

  5. 设计模式——代理模式（C++实现）

    #include <iostream> #include <string> using namespace std; class CSubject { public: ; }; ...

  6. Redis --> Redis架构设计

    Redis架构设计 一.前言   Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 它支持多种类型的数据结构,如 字符串(strings), 散列 ...

  7. Algorithm --> 全排列

    1.算法简述 简单地说:全排列就是从第一个数字起每个数分别与它后面的数字交换. E．g:E = (a , b , c),则 prem(E)= a.perm(b,c)+ b.perm(a,c)+ c.p ...

  8. Flashing Back a Failed Primary Database into a Physical Standby Database（闪回FAILOVER失败的物理备库）

    文档操作依据来自官方网址:https://docs.oracle.com/cd/E11882_01/server.112/e41134/scenarios.htm#SBYDB4888 闪回FAILOV ...

  9. 用python程序来画花

    from turtle import * import time setup(600,800,0,0) speed(0) penup() seth(90) fd(340) seth(0) pendow ...

  10. Dom属性方法

    一.javascript的三大核心 1.ECMAScript js的语法标准 2.DOM Document object Model 文档对象模型,提供的方法可以让js操作html标签 3.BOM B ...