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. Maven高级——依赖管理

    依赖管理 依赖指向当前项目运行所需的jar包,一个项目可以设置多个依赖 依赖传递 依赖具有传递性 直接依赖:在当前项目中通过依赖配置建立的依赖关系 间接依赖:被依赖的资源如果依赖其他资源.当前项目间接 ...

  2. QT原理与源码分析之对象级QT事件过滤器

    本文简略介绍了QT原理与源码分析中的QT对象级事件过滤器的自定义过滤函数.对象级事件过滤器的安装过程,以及安装函数的源码实现. 自定义QT事件过滤器的过滤函数的实现: 事件过滤器被调用时执行的函数代码 ...

  3. mysql用户相关操作（转载）

    mysql用户相关操作 一. 创建用户 命令: CREATE USER 'username'@'host' IDENTIFIED BY 'password'; 说明: username:你将创建的用户 ...

  4. USB总线-Linux内核USB设备驱动之UAC2驱动分析（十）

    1.概述 UVC(USB Audio Class)定义了使用USB协议播放或采集音频数据的设备应当遵循的规范.目前,UAC协议有UAC1.0和UAC2.0. UAC2.0协议相比UAC1.0协议,提供 ...

  5. 推荐一款轻量级 eBPF 前端工具 ply

    1 Overview ply 是 eBPF 的 front-end 前端工具之一,专为 embedded Linux systems 开发,采用 C 语言编写,只需 libc 和内核支持 BPF 就可 ...

  6. excel导出功能的实现流程说⼀下？

    导出的话,我们因为到处的数据量不⼤,所以直接采取的时候前端主导的⽅案,参考的现成⽅案实现的 导出 ⼤概得流程就是 1. 调⽤后端接⼝得到要导出的数据 2. 把数据简单处理⼀下转化成导出插件需要的格式 ...

  7. 排查sshfs挂载失败的问题

    排查sshfs挂载失败的问题 写代码在Linux上运行,但是熟悉的IDE(比如VS code)在自己的电脑上,可以使用sshfs把linux上的目录挂载到本地,再用VScode打开即可,可以使用下面的 ...

  8. vue3实现多层级的动态表单增减

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  9. 云原生周刊：Docker 推出 Docker Build Cloud

    开源项目推荐 Kube-Vip Kube-Vip 旨在为 Kubernetes 集群提供高可用性和负载均衡功能.它提供了一个可插拔的 VIP(虚拟 IP)管理器,可以为集群中的服务分配一个虚拟 IP ...

  10. DataDream：调一调更好，基于LoRA微调SD的训练集合成新方案 | ECCV'24

    尽管文本到图像的扩散模型已被证明在图像合成方面达到了最先进的结果,但它们尚未证明在下游应用中的有效性.先前的研究提出了在有限的真实数据访问下为图像分类器训练生成数据的方法.然而,这些方法在生成内部分布 ...