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. git团队协作

    hi,team,我们目前使用的是git做项目管理,它是非常优秀的版本控制工具,使用好可以极大提高我们团队开发效率.但是,出现不必要的冲突和代码丢失就要费时解决这些可避免的问题. git开发流程 这个流 ...

  2. 关于 promise 吃到错误的理解

    关于 promise 吃到错误的理解 下面的内容需要对浏览器原生支持的 promise 的基本用法有了解,如果你还不知道 promise 和 promise 的 catch 方法,你可能需要先在 这里 ...

  3. selenium 断言与验证

    断言和验证都是判断结果是否跟预期效果是否一致,不一致的情况下,断言会导致测试用例直接失败,程序不会继续执行:验证的测试用例会继续执行. 断言的4种模式+5种手段: assert 断言失败时,该测试将终 ...

  4. 简单解决python安装中的Unable to find vcvarsall.bat问题

    使用python36安装python的murmurhash的时候遇到上述问题,原因是没有找到vcvarsall.bat.查找vcvarsall.bat的方法是定义在_msvccompiler.py文件 ...

  5. python学习03－数据类型

    一.基本数据类型--数字 布尔型 bool型只有两个值:True和False 之所以将bool值归类为数字,是因为我们也习惯用1表示True,0表示False. 以下是布尔值是False的各种情况: ...

  6. springboot集成swagger2

    介绍:        Swagger是全球最大的OpenAPI规范(OAS)API开发工具框架,支持从设计和文档到测试和部署的整个API生命周期的开发.(摘自Swagger官网)Swagger说白了就 ...

  7. 给定n，求1/x + 1/y = 1/n （x<=y）的解数~hdu-1299~(分解素因子详解）

    链接:https://www.nowcoder.com/acm/contest/90/F来源:牛客网 题目描述 给定n,求1/x + 1/y = 1/n (x<=y)的解数.(x.y.n均为正整 ...

  8. [机器学习Lesson 1 Introduction] 机器学习的动机与应用

    1. Machine Learning definition(机器学习定义) Arthur Samuel(1959年)将机器学习非正式定义为:在不直接针对问题进行编程的情况下,赋予计算机学习能力的一个 ...

  9. 【JS】 Javascript与BOM的互动 寻路

    JS BOM 之前提到过JS和DOM之间的互动方法.而BOM(Browser Object Module)是浏览器的对象模型,它也可以和JS进行互动.也就是说,JS还可以和浏览器进行互动.因为现代主流 ...

  10. salesforce lightning零基础学习(一) lightning简单介绍以及org开启lightning

    lightning对于开发salesforce人员来说并不陌生,即使没有做过lightning开发,这个名字肯定也是耳熟能详.原来的博客基本都是基于classic基于配置以及开发,后期博客会以ligh ...