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. MDC – Text field

    前言 Angular Material 只有 Form field, 但 Material Design 有份 Text field 和 Form field, Form field 是给 check ...

  2. JavaScript – 理解 Function, Object, Prototype, This, Class, Mixins

    前言 JavaScript (简称 JS) 有几个概念 Object, Prototype, This, Function, Class 是比较难理解的 (相对其它语言 C# / Java 而已),这 ...

  3. Google Ads – 大杂烩

    广告相互竞争, 自己打自己? About similar keywords in a Google Ads account 如果用户的搜索能匹配到广告 Campaign 中多个广告的话, 会怎么样? ...

  4. mongodb 中rs.stauts()命令参数解析

    转载请注明出处: rs.status()命令用于获取MongoDB副本集的状态信息.它提供了关于副本集中各个节点的详细信息,包括节点的健康状况.角色.选举状态等. 以下是查看一个mongo集群状态返回 ...

  5. C#实现信创国产Linux桌面录制成MP4（源码，银河麒麟、统信UOS）

    信创国产化已是大势所趋,在国产操作系统上的应用开发的需求越来越多,比如,有客户需要在银河麒麟和统信UOS上实现录制桌面生成一个mp4文件.那么这个要如何实现了? 一. 技术方案 要完成这些功能,具体来 ...

  6. Nacos 配置加密

    Nacos 配置加密 nacos配置加密官网 官网介绍太简单,而且GitHub 网络受限,随缘访问.Gitee 发现有镜像仓库,同步的最新版本 Gitee nacos 镜像仓库 但是官网中提到的加密插 ...

  7. `std::optional` 函数返回值

    std::optional 是 C++17 中引入的一个模板类,用于表示一个值可能存在也可能不存在的情况. 它可以存储一个值,或者表示没有值的状态,类似于其他编程语言中的"可选"类 ...

  8. js的宏任务和微任务有哪些，是怎么执行的 ？

    事件循环有宏任务和微任务: 宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的js代码,剩余队列任务有setTimeout setInterval  :微任务所处的 ...

  9. spring boot 官网提供所有组件

    所有资源来自于官网:https://start.spring.io/,在此整理只是为了方便查看 Developer Tools Spring Boot DevToolsProvides fast ap ...

  10. CSP-J2/S2 2023 游记

    可能早就应该发出来的游记. 2023-10-07 16:32. 前一天睡得比较晚,所以迟到了一点点. 上来先敲了个对拍,拍了一个 if a % 1000 = 0 then a++ 的 A + B,拍出 ...