• 【JavaScript】三大元素系列讲解

    🍈作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

    🍇个人主页：亦世凡华、的博客

    🍓系列专栏：JavaScript专栏

    🥝推荐一款模拟面试刷题神器🔥：点击跳转进入网站

    目录

    🏍️元素偏移量 offset

    🍇offset系列常用属性：

    🍈offset和style的区别

    🍉案例-获取鼠标在盒子中的坐标

    🏍️元素可视区 client

    🏍️元素滚动 scroll

    🏍️总结

    🏍️元素偏移量 offset

    offset翻译过来就是偏移量的意思，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。其作用是：获取元素距离带有定位父元素的位置、获取元素自身大小（宽度高度：返回的数值都不带单位）。

    🍇offset系列常用属性：

    offset系列属性作用
    element.offsetParent返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
    element.offsetTop返回元素相对带有定位父元素上方的偏移
    element.offsetLeft返回元素相对带有定位父元素左边框的偏移量
    element.offsetWidth返回自身包括padding、边框、内容区的宽度、返回数值不带单位
    element.offsetHeight返回自身包括padding、边框、内容区的高度、返回数值不带单位

    获取元素位置

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             margin: 0;
    11.             padding: 0;
    12.         }
    13.         .father{
    14.             position: relative;
    15.             width: 200px;
    16.             height: 200px;
    17.             background-color: #008c8c;
    18.             margin: 100px;
    19.         }
    20.         .son{
    21.             width: 100px;
    22.             height: 100px;
    23.             background-color: #000;
    24.             margin-left: 50px;
    25.         }
    26.     style>
    27. head>
    28. <body>
    29.     <div class="father">
    30.         <div class="son">div>
    31.     div>
    32.     <script>
    33.         // offset
    34.         var father = document.querySelector('.father')
    35.         var son = document.querySelector('.son')
    36.         // 返回带有定位的父亲 否则就返回body
    37.         console.log(son.offsetParent);
    38.         // 得到元素偏移量 返回不带数值
    39.         console.log(father.offsetTop);
    40.         // 以带有定位的父亲为准，如果没有父亲或者父亲没有定位 则以body为准
    41.         console.log(son.offsetLeft);
    42.     script>
    43. body>
    44. html>

    获取元素大小

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .width{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: #008c8c;
    13.             margin: 200px auto 0;
    14.             padding: 20px;
    15.             border: 15px solid #f00;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div class="width">div>
    21.     <script>
    22.         var w = document.querySelector('.width');
    23.         // offset 得到的元素大小 宽度和高度是包含 padding + border + width
    24.         console.log(w.offsetWidth);
    25.         console.log(w.offsetHeight);
    26.     script>
    27. body>
    28. html>

    🍈offset和style的区别

    offsetstyle
    offset可以得到任意样式表中的样式值style只能得到行内样式表中的样式值
    offset系列获得的数值是没有单位的style.width获得的是带有单位的字符串
    offsetWidth包含padding+border+widthstyle.width获得不包含padding和border值
    offsetWidth等属性是只读属性，只能获取不能赋值style.width是可读可写属性，可以获取也可以赋值
    要想获取元素大小位置，用offset更合适要想给元素更改值，需要用style改变
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 200px;
    11.             height: 200px;
    12.             padding: 10px;
    13.             background-color: #008c8c;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div class="box" style="width: 200px;">div>
    19.     <script>
    20.         var box = document.querySelector('.box');
    21.         console.log(box.offsetWidth);
    22.         console.log(box.style.width);
    23.     script>
    24. body>
    25. html>

    🍉案例-获取鼠标在盒子中的坐标

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .box{
    10.             width: 300px;
    11.             height: 300px;
    12.             background-color: #008c8c;
    13.             margin: 100px auto 0;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div class="box">div>
    19.     <script>
    20.         var box = document.querySelector('.box');
    21.         box.addEventListener('mousemove',function(e){
    22.             // 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。
    23.             // 首先得到鼠标在页面中的坐标（e.pageX e.pageY）
    24.             // 其次得到盒子在页面中的距离（box.offsetLeft box.offsetTop）
    25.             // 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标
    26.             // console.log(e.pageX);
    27.             // console.log(e.pageY);
    28.             // console.log(box.offsetLeft);
    29.             var x = e.pageX - this.offsetLeft;
    30.             var y = e.pageY - this.offsetTop
    31.             this.innerHTML = 'x坐标是'+x+'y坐标是'+y;
    32.         })
    33.  
    34.     script>
    35. body>
    36. html>

    🏍️元素可视区 client

    client翻译过来就是客户端的意思，我们使用client系列的相关属性来获取元素的可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小，元素大小等。

    client系列属性作用
    element.clientTop返回元素上边框的大小
    element.clientLeft返回元素左边框的大小
    element.clientWidth返回自身包括padding、内容区的宽度、不含边框，返回数值不带单位
    element.clientHeight返回自身包含padding、内容区的高度、不含边框，返回数值不带单位
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: #008c8c;
    13.             border: 10px solid red;
    14.             padding: 10px;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <div>div>
    20.     <script>
    21.         // clientWidth 和 offsetWidth 最大区别就是不
    22.         var div = document.querySelector('div')
    23.         console.log(div.clientWidth);
    24.     script>
    25. body>
    26. html>

    🏍️元素滚动 scroll

    scroll翻译过来就是滚动的，我们使用scroll的相关属性可以动态的得到该元素的大小、滚动距离等

    如果浏览器的宽高不足以显示整个页面时，会自动出现滚动条，当滚动条向下滚动时，页面上面被隐藏的高度称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

    scroll属性作用
    element.scrollTop返回被卷去的上侧距离，返回数值不带单位
    element.scrollLeft返回被卷去的左侧距离，返回数值不带单位
    element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位
    element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         div{
    10.             width: 200px;
    11.             height: 200px;
    12.             background-color: #008c8c;
    13.             border: 10px solid red;
    14.             padding: 10px;
    15.             overflow: auto;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe maiores cumque delectus ullam nostrum expedita totam, accusantium, voluptatem quis tempore ipsam corrupti nobis. Iure, vero? Sequi, unde! Non, nam explicabo.div>
    21.     <script>
    22.         // clientWidth 和 offsetWidth 最大区别就是不
    23.         var div = document.querySelector('div')
    24.         console.log(div.scrollHeight);
    25.         console.log(div.clientHeight);
    26.         // scroll滚动事件，当我们滚动条发生变化会触发的事件
    27.         div.addEventListener('scroll',function(){
    28.             console.log(div.scrollTop);
    29.         })
    30.     script>
    31. body>
    32. html>

    🏍️总结

    三大元素系列大小对比作用
    element.offsetWidth返回自身包括padding、边框、内容区的宽度、返回数值不带单位
    element.clientWidth返回自身包括padding、不含边框、内容区的宽度、返回数值不带单位
    element.scrollWidth返回自身实际宽度，不含边框，返回数值不带单位

    主要用法：

    1.元素offset 经常用于获取元素位置 offsetLeft、offsetTop

    2.元素client 经常用于获取元素大小 clientWidth、clientHeight

    3.元素scroll 经常用于获取滚动距离 scrollTop、scrollLeft

    页面的滚动距离通过 window.pageXOffset 获得

    🍃JavaScript的学习还是要以多练习为主，想要练习JavaScript的朋友，推荐可以去牛客网看一看，链接：牛客网 里面的IT题库内容很丰富，属于国内做的很好的了，最重要的是里面的资源是免费的，是课程+刷题+面经+求职+讨论区分享，一站式求职学习网站，感兴趣的可以去看看。

    呜呜~，原创不易。

  • 相关阅读:
    #力扣：26. 删除有序数组中的重复项@FDDLC
    LeetCode 162.寻找峰值（中等）
    横向对比 npm、pnpm、tnpm、yarn 优缺点
    我复现的第一个神经网络: LeNet
    Android 12.0Launcher3 电话和短信app图标显示未读短信和未接来电的条数
    Web3中文｜什么是以太坊虚拟机(EVM)，它是如何工作的?
    Docker简介
    springboot过滤器拦截自定义异常
    压力测试-Jmeter脚本录制方案
    【牛客刷题】——Python入门 07 循环语句（下）
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/126016527