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. Linux基础教程（一）——Linux系统简介

    Linux的概述 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境.Linux是由Linus Torvalds(林纳斯·托瓦兹)起初开发的,由于 ...

  2. 设计模式——装饰器模式（C++实现）

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

  3. python 全栈开发，Day1

    python基础一 一,Python介绍 python的出生与应用 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为 ...

  4. EOS 上线前，先搞懂这两个基本概念

    如果你曾经尝试在本地运行 EOS 测试节点,会发现编译.运行并不是特别复杂,但官方教程里两个概念很容易把人搞晕: Account(账户)和 Wallet (钱包). EOS 的 Wallet 跟其他区 ...

  5. 新装的Linux服务系统安装MySQL

    目的描述:全新的腾讯云Linux服务器,系统是ubuntu 16.04.需要在上面安装mysql数据库. 使用XShell远程登录,在终端窗口中使用sudo apt-get 指令在线安装mysql. ...

  6. 常用的Maven依赖

    一.数据库类型 1.mysql驱动 <!-- mysql驱动支持 --> <dependency> <groupId>mysql</groupId> & ...

  7. Asp.Net Core 2.0 项目实战（9） 日志记录，基于Nlog或Microsoft.Extensions.Logging的实现及调用实例

    本文目录 1. Net下日志记录 2. NLog的使用     2.1 添加nuget引用NLog.Web.AspNetCore     2.2 配置文件设置     2.3 依赖配置及调用     ...

  8. linux新建用户并赋管理员权限

    输入useradd新建一个用户 [root@java-devenv ~]# useradd yaoqi [root@java-devenv ~]# passwd yaoqi passwd 是修改用户密 ...

  9. WebAPI问题追踪日志记录过滤器

    公司项目比较坑爹,毕竟涉及到前后端分离.多部门协作,很多时候系统出问题,哪怕已经很清楚了,协作方依然要我们把API调用入参.响应等记录下来,而且是全记录,不光是异常调用,待调查结束后这些日志又需要卸下 ...

  10. Oracle查看表空间大小和使用率

    1. 全部表空间的大小select tablespace_name, sum(bytes)/1024/1024 from dba_data_files group by tablespace_name ...