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. SoftCLT: 时间序列的软对比学习《Soft Contrastive Learning for Time Series》(时间序列、时序分类任务、软对比学习、实例上软赋值距离差异、数据空间非嵌入空间度量相似性)

    2024年6月25日,10:11,好几天没看论文了,一直在摸鱼写代码(虽然也没学会多少),今天看一篇师兄推荐的. 论文:Soft Contrastive Learning for Time Serie ...

  2. 低代码 + BI 数字化转型如何助力制造业供应链协同？

    引言 在当今快速变化的商业环境中,制造业面临着前所未有的挑战和机遇.全球化竞争.消费者需求的快速变化.技术创新的加速以及不断增加的成本压力,都要求制造企业不断提高其供应链的效率和灵活性.供应链协同作为 ...

  3. P1543 [POI2004] SZP 题解

    P1543 [POI2004] SZP 题解 传送门. 题目简述 有 \(n\) 个人,每个人都会监视另一个人,要求选出尽可能多的同学,使得选出的每一名同学都必定会被监视到.且选出的同学不可再监视其他 ...

  4. QT疑难杂症之如何使用自定义模型实现文件系统模型？类似QFileSystemModel，却比QFileSystemModel更好用

    简介 本文讨论了QT文件系统模型QFileSystemModel的不足之处,并且讨论了改进目标,如何实现自定义文件系统模型,以及进一步改进的空间. 目录 QFileSystemModel的不足之处 改 ...

  5. vscode废掉了，跳转不到函数定义，无法自动补全，重装也没用的解决办法

    1. 先卸载掉所有已安装的插件 2. 卸载vscode 3. 删除个人配置和插件配置,涉及两个文件夹 4. 需要安装C/C++组件,下载对应的vsix文件 下载地址: https://github.c ...

  6. Linux下挂载SD卡，以及容易犯的误区

    1.插入SD卡 如果系统能够识别SD卡,则会打印一些信息: 2.查看系统给SD卡分配的设备名 命令如下: fdisk -l 说明:通常是根据SD卡的存储容量来确定的. 比如下面的信息: 3.挂载SD卡 ...

  7. 第6天：基础入门-抓包技术&HTTPS协议&APP&小程序&PC应用&WEB&转发联动

    安装charles 到Windows本地: 安卓模拟器安装: 如果抓模拟器就要使用从远程主机,如果不是,则从所有进程 访问 谷歌浏览器安装证书: PC微信小程序代理抓取: 41:43 :如何将char ...

  8. .Net 6 SignalR 实际业务开发中遇到的问题及解决办法

    一.SiganlR 使用的协议类型 1.websocket即时通讯协议 2.Server-Sent Events(SSE)服务器事件 3.longpolling 长轮询. 如果客户端开启协商,会按顺序 ...

  9. CentOS开放端口的方法(转载)

    CentOS开放端口的方法 转载:https://www.itfeichai.com/centos-open-porter/ Centos升级到7之后,内置的防火墙已经从iptables变成了fire ...

  10. Java日期时间API系列27-----Jdk8中java.time包中的新的日期时间API类，使用xk-time工具类创建日历应用，自定义节假日，工作日和打印日历表。

    1.日历相关类 1.1 日历类 CalendarWrapper package com.xkzhangsan.time.calendar; import java.io.Serializable; i ...