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

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

  1. 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. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

随机推荐

  1. pat1040. Longest Symmetric String (25)

    1040. Longest Symmetric String (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, ...

  2. 判断表单中是否含有disabled属性

    我想判断input里面是否有disabled.或者选中未选中的selected  checked 属性时,需要用  prop()  方法,返回的结果是 true 或 false . attr()这个方 ...

  3. IE浏览器兼容性问题解决方案

    一.CSS常见问题 1.H5标签兼容性 解决方案:<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.j ...

  4. php 入门

    <?php $username = $_POST["username"]; $passcode = $_POST["passcode"]; # 一定要my ...

  5. c++ 控制台输入参数

    #include <iostream>#include <string> using namespace std; int main(int argc,char **argv) ...

  6. 关于UnitOfWork

    按照http://martinfowler.com/eaaCatalog/unitOfWork.html这篇文章的介绍,UnitOfWork是为了维护对象的变化,A Unit of Work keep ...

  7. Hibernate课程 初探多对多映射2-2 创建持久化类和映射文件

    生成实体类 和 cfg.xml配置 cfg.xml 参照一对多映射 实体类如下: Project 类 package com.ddwei.entity; import java.util.HashSe ...

  8. C语言问题集

    征服C指针:P70#include "stdio.h" char *int_to_str(int int_value){ static char buf[20]; sprintf( ...

  9. Ubuntu 16.10 安装mysql

    打开终端 sudo apt update 完成后 sudo apt install mysql-server 中间会提示设置root 账户的密码 有的文章提到 还要 install mysql-cli ...

  10. MOSS2010中如何用代码给托管元数据类型的栏目赋值

    最近项目中遇到如何用代码给托管元数据类型的栏目赋值问题,经过折腾,现把我的思路和实现方法共享出来,让大家一起来学习学习.相互探讨下. /// <summary> /// 托管元数据 /// ...