1.Dom元素的大小

属性 说明 调用者
offsetWidth，offsetHeight 返回元素的宽高(border+padding) ,整数 当前Dom元素
clientWidth，clientHeight 返回元素的宽高(padding) ,整数，不能是行内元素 当前Dom元素
getBoundingClientRect().width 返回元素的宽度(border+padding+width),精确到小数 当前Dom元素
getBoundingClientRect().height 返回元素的宽度(border+padding+height),精确到小数 当前Dom元素
scrollWidth/scrollHeight 这个属性只有当子元素大小超出父容器时才有意义。即：父元素被撑开的大小。 当前Dom元素
getComputedStyle(element).width 返回元素的宽度(不包含border+padding，带单位px) window
getComputedStyle(element).hegiht 返回元素的高度(不包含border+padding，带单位px) window
  • 注意1：getComputedStyle(element)这个方法返回目标元素实际生效的样式对象，再通过属性名获取到具体的属性值（宽高带单位，可自行用parseInt()转换），行内元素返回 auto
  • 注意2：元素的display不能为none，否则宽高为0
  • 注意3：IE 8并不支持getComputedStyle这个特性。 IE 8 支持的是 element.currentStyle 这个属性
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test</title>

    </head>

    <style>

        *{padding: 0;margin: 0;}

        #box{

            width: 400px;

            height: 200px;

            padding: 10px;

            border:2px solid red;

        }

        #big{

            width: 600px;

            height: 300px;

            background-color: pink;

            color: #fff;

            text-align: center;

            font-size: 50px;

            line-height: 300px;

        }

    </style>

    <body>

        <div id="box">

            <div id="big">较大的子元素600 * 300</div>

        </div>

    </body>

</html>

<script>

    var box = document.querySelector('#box')

    // 元素总大小

    console.log(box.offsetWidth) // 424

    console.log(box.offsetHeight) // 224

    // 元素可见大小

    console.log(box.clientWidth) // 420

    console.log(box.clientHeight) // 220

    // 元素内容区大小

    console.log(getComputedStyle(box))//CSSStyleDeclaration{}

    var width = getComputedStyle(box).width

    var height = getComputedStyle(box).height

    console.log(width,height) // 400px 200px

    //下面的代码只能在IE8中运行

    //alert(box.currentStyle.width)//400px

    // 元素被撑开的大小（子元素的总大小）

    console.log(box.scrollWidth) //610

    console.log(box.scrollHeight) //310

</script>

当子元素的总大小小于父容器时：

2.Dom元素的位置信息

属性名 说明 调用者
offsetLeft 获取当前元素到父级定位元素左边的距离，注意，是父级定位元素(el.offsetParent)！！！ 当前Dom元素
offsetTop 获取当前元素到父级定位元素顶部的距离，注意，是父级定位元素(el.offsetParent)！！！ 当前Dom元素
scrollLeft 获取和设置当前元素被滚动条卷去的宽度 当前Dom元素
scrollTop 获取和设置当前元素被滚动条卷去的高度 当前Dom元素

注意：元素的display不能为none，否则距离为0

通过设置元素scrollLeft/scrollTop属性值的大小，可以让滚动条滚动到相应的位置。

注意：监听系统滚动条请使用window对象，设置系统滚动条要使用document.documentElement元素

<script>

    var box = document.querySelector('#box')

    // 让box元素回到顶部

    box.scrollTop = 0

    // 让box元素回到最左边

    box.scrollLeft = 0

    //系统滚动条

    window.onscroll = function (ev) {

        //操作系统的滚动条要使用document.documentElement元素

        console.log(document.documentElement.scrollTop)

    }

    //系统滚动条回到顶部

    document.documentElement.scrollTop = 0

</script>

3.获取屏幕大小

对象 说明 备注
window.screen.width 返回当前屏幕的宽度（设备独立像素） 值是静态的，大小取决于屏幕
window.screen.height 返回当前屏幕的高度（设备独立像素） 值是静态的，大小取决于屏幕
document.documentElement.clientWidth 返回当前页面根标签(html标签)的宽度 值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响
document.documentElement.clientHeight 返回当前页面根标签(html标签)的高度 值取决于当前浏览器的窗口大小，会受浏览器的窗口缩放，工具栏之类的影响 
<script>

    var screen_width = window.screen.width

    var screen_height = window.screen.height

    document.write('当前屏幕宽高为'+screen_width+'*' + screen_height)

    var html_width = document.documentElement.clientWidth

    var html_height = document.documentElement.clientHeight

    document.write('<br />'+'当前html标签宽高为'+html_width+'*' + html_height)

</script>

pc端表现1：14寸笔记本-浏览器全屏

当前屏幕宽高为1366*768

当前html标签宽高为1366*625

pc端表现2：14寸笔记本-浏览器窗口化（screen系列不受影响，而html元素变小）

当前屏幕宽高为1366*768

当前html标签宽高为767*604

移动端未设置viewport时（iphone6s plus）

当前屏幕宽高为414*736

当前html标签宽高为980*1472

移动端设置完美视口：浏览器工具栏会占据一部分空间，所以 html.clientHeight < screen.height

 <meta name="viewport" content="initial-scale=1.0">

当前屏幕宽高为414*736

当前html标签宽高为414*622

Javascript Dom元素信息的更多相关文章

  1. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  2. JavaScript DOM–元素操作

    获取元素 根据 ID 获取元素 语法: document.getElementById(id) <div id='time'>2020-01-09</div> <scri ...

  3. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【温故而知新-Javascript】为DOM元素设置样式

    1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...

  5. JavaScript DOM动态创建（声明）Object元素

    http://www.cnblogs.com/GuominQiu/archive/2011/04/01/2002783.html 一文提及“等整个页面加载完毕后,根据用户所选的阅读机类型,再用Java ...

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

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

  7. JavaScript DOM实战：创建和克隆元素

    DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...

  8. JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  9. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  10. 点击空白处隐藏指定dom元素（纯javascript方法）

    <script type="text/javascript"> document.onclick = function (event) { event = event ...

随机推荐

  1. 全面升级，票据识别新纪元：合合信息TextIn多票识别2.0

    ​ 票据识别 - 自动化业务的守门员 发票.票据识别,是OCR技术和RPA.CMS系统结合的一个典型场景,从覆盖率.覆盖面的角度来说,应该也是结合得最成功的场景之一. 旧瓶装新酒,已经成熟的产品何苦费 ...

  2. AI老照片修复神器，Anole下载介绍

    最近AI老照片修复上色,再一次火出圈,一些社交平台关于此话题内容流量满满,尤其是在小红书和抖音火的不得了,本期文章就来给大家分享下AI修复老照片的方式方法 本文主要介绍使用Anole修复老照片的方法, ...

  3. JVM（JAVA Virtual Machine）Java虚拟机

    JVM的跨平台性 一次编写,到处运行 JVM将字节码文件编译成对应操作系统的机器码 JVM的语言无关性 JVM的内存区域 虚拟机栈:在JVM运行过程中存储当前线程运行方法所需的数据,指令.返回地址 本 ...

  4. 树形结构数据 数组对象 按照 sort 字段排序

    export function sortTreeData (data, flag) { let arr = [] if (flag === 1) { arr = data[0].children } ...

  5. 我对CMD 和 AMD 的理解 ？

    都是模块规范,和 CommonJs 一样都是社区规范,ES-module 才是官方规范,而且官方规范是趋势 : AMD:Asynchronous Module Definition  异步模块定义,即 ...

  6. 实例：（[Flappy Bird Q-learning]

    目录 实例:(Flappy Bird Q-learning) 问题分析 关于Q 训练 成果 实例:(Flappy Bird Q-learning) 问题分析 让小鸟学习怎么飞是一个强化学习(reinf ...

  7. .NET 8 实现无实体库表 API 部署服务

    前言 快速将创意变为现实!无需实体建库建表即可完成增删改查操作,支持15种条件查询.分页.列表及无限级树形列表等多种功能的API部署. 提供完善的接口文档.Auth授权.接口限流.客户端真实IP获取. ...

  8. SpringBoot开启Gzip接口报文压缩

    背景 当我们一个接口响应报文比较大的时候,超过几兆甚至几十兆的情况下,减少响应体的报文大小是能有效减少响应时间的. spring boot 配置 server: compression: ## 开启服 ...

  9. vue中的prop组件封装

    学习vue有一段时间了,也写了一些东西.今天看文档突然看到了一个好玩的东西,那就是prop.prop的作用是父组件中引用了子组件并给子组件加了一个属性,这个属性可以是静态的,可以是动态的,可以是数字, ...

  10. CSP-S 2024 简单题

    CSP-S 2024 简单题 以下均为考场做法. T1 决斗 (duel) 考虑贪心,按照攻击力 \(a_i\) 排序,从小到大使用所有怪物进行攻击,每只怪物攻击一个在场且能击杀的怪物中,攻击力最大的 ...