原生JS获取元素的位置与尺寸

最新推荐文章于 2023-02-23 22:55:58 发布

菜同学

最新推荐文章于 2023-02-23 22:55:58 发布

阅读量341

点赞数 1

分类专栏： javaScript 文章标签： js 元素位置尺寸屏幕相对

本文链接：https://blog.csdn.net/qq_41530816/article/details/99541854

版权

javaScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .container{
      width: 100%;
      height: 600px;
      border: 1px solid green;
    }
    #elediv{
      width: 400px;
      height: 60px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 60px;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="elediv">
      这是一个测试
    </div>
  </div>
  <script>
    var eldiv = document.getElementsByTagName('div')[1];
    console.log(eldiv);
    // 获取到的是内容区 宽度 + 内边距
    console.log('clientWidth',eldiv.clientWidth);
    // 获取到的是内容区 高度 + 内边距
    console.log('clientHeight',eldiv.clientHeight);
    // 内容区的 上边框
    console.log('clientTop',eldiv.clientTop);
    // 内容区的 左边框
    console.log('clientLeft',eldiv.clientLeft);
    // 内容区的 宽度 + 左右内边距 + 左右边框
    console.log('offsetWidth',eldiv.offsetWidth);
    // 内容区的 高度 + 上下内边距 + 上下边框
    console.log('offsetHeight',eldiv.offsetHeight);
    // 内容区的 大小 和 相对视口的位置
    // top    内容区 上边界 和 父元素 上边界的距离
    // bottom 内容区 下边界 和 父元素 上边界的距离
    // left   内容区 左边界 和 父元素 左边界的距离
    // right  内容区 右边界 和 父元素 左边界的距离
    // height 内容区 + 上下内边距 + 上下边框
    // width  内容区 + 左右内边距 + 左右边框
    // x/y    元素左上角和父元素左上角的距离
    console.log('getBoundingClientRect',eldiv.getBoundingClientRect());
    // 可视区域的宽度
    console.log('document.documentElement.clientWidth',document.documentElement.clientWidth);
    // 可视区域的高度
    console.log('document.documentElement.clientHeight',document.documentElement.clientHeight);
    // 页面的实际大小
    console.log('document.documentElement.scrollWidth',document.documentElement.scrollWidth);
    console.log('document.documentElement.scrollHeight',document.documentElement.scrollHeight);
    // 窗口左上角与屏幕左上角的距离
    console.log('window.screenX',window.screenX);
    console.log('window.screenY',window.screenY);
    // 屏幕的宽高
    console.log('window.screen.width',window.screen.width);
    console.log('window.screen.height',window.screen.height);
    // 屏幕可用宽高（去除任务栏）
    console.log('window.screen.availWidth',window.screen.availWidth);
    console.log('window.screen.availHeight',window.screen.availHeight);
    // 窗口的内高度、内宽度（文档显示区域+滚动条）
    console.log('window.innerWidth',window.innerWidth);
    console.log('window.innerHeight',window.innerHeight);
    // 窗口的外高度、外宽度
    console.log('window.outerWidth',window.outerWidth);
    console.log('window.outerHeight',window.outerHeight);

  </script>
</body>
</html>

1.clientwWidth,clientHeight（width + padding,height + padding）
在这里插入图片描述
2.clientTop,clientLeft（border-top,border-left）

3.offsetWidth,offsetHeight（width + padding + border, height + padding + border）

4.getBoundingClientRect() （top, bottom , left , right , x ,y ,width）

5.document.documentElement.clientWidth, document.documentElement.clientHeight （可视区域的宽高）
6.document.documentElement.scrollWidth, document.documentElement.scrollHeight （页面的实际大小，包括滚动条以下的高度）
在这里插入图片描述

7.window.screen.width, window.screen.height （屏幕的宽高）
在这里插入图片描述

菜同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS获取元素的位置与尺寸

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
复制链接

扫一扫