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. 工具 – Cypress

    介绍 Cypress 是一款 e2e 测试工具.每当我们写好一个组件或者一个页面之后,我们会想对整体做一个测试. 在不使用工具的情况下,我们会开启 browser,然后做一系列点击.滚动.填 form ...

  2. RxJS 系列 – Custom Operator

    前言 虽然 RxJS 提供了非常多的 Operators. 但依然会有不够用的时候. 这时就可以自定义 Operator 了. Operator Is Just a Function Observab ...

  3. BOM – Navigator SendBeacon

    介绍 游览器专门做给 tracking 用的接口. 从前我们想 tracking 用户点击 anchor 是比较麻烦的. 因为 click 事件触发后, 想发 ajxax 去做 tracking re ...

  4. Spring —— 注解开发（依赖注入）

    自动装配   引用类型         简单类型      加载properties文件      

  5. QT原理与源码分析之QT对象类型QObject源码中的间接的设计思想

    这一篇文章介绍QT框架中QT对象类型QObject类型的源代码在设计上的一个比较优秀的设计思想. QObject类型定义 QObject 直接来看QObject的源代码.为了表达更简洁更直观,这里省略 ...

  6. SimpleRAG-v1.0.3：增加文件对话功能

    Kimi上有一个功能,就是增加文件之后对话,比如我有如下一个私有文档: 会议主题:<如何使用C#提升工作效率> 参会人员:张三.李四.王五 时间:2024.9.26 14:00-16:00 ...

  7. 彻底解决 user.config 文件损坏

    症状见 发生 Configuration system failed to initialize 错误的一个特例 解决的办法,在去读 user.settings 之前捕获错误,比如 Main() 里面 ...

  8. 在 Kubernetes Pod 中如何获取客户端的真实 IP

    Kubernetes 依靠 kube-proxy 组件实现 Service 的通信与负载均衡.在这个过程中,由于使用了 SNAT 对源地址进行了转换,导致 Pod 中的服务拿不到真实的客户端 IP 地 ...

  9. Kubernetes 集群中流量暴露的几种方案

    作者:KaliArch(薛磊),某 Cloud MSP 服务商产品负责人,熟悉企业级高可用 / 高并发架构,包括混合云架构.异地灾备,熟练企业 DevOps 改造优化,熟悉 Shell/Python/ ...

  10. Machine Learning week_2 Multivariate Prameters Regression

    目录 1 Multivariate Prameters Regression 1.1 Reading Multiple Features 1.2 Gradient Descent For Multip ...