1.offsetLeft和offsetTop获取元素偏移

  1. <!--
  2. offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置(偏移量)、大小等
  3. 获得元素距离带有定位父元素的位置
  4. 获得元素自身的大小(宽度和高度)
  5. 注意：返回的数值都不带单位
  7. offset系列常用属性：
  8. offset系列属性          作用
  9. element.offsetParent   返回作为该元素带有定位的父级元素，如果父级元素都没有定位则返回body
  10. element.offsetTop      返回元素相对带有定位元素上方的偏移，如果没有父级或父级元素都没有定位则返回body
  11. element.offsetLeft     返回元素相对带有定位元素左边框的偏移，如果没有父级或父级元素都没有定位则返回body
  12. element.offsetWidth    返回自身包括padding、边框、内容区的宽度，返回数值不带单位
  13. element.offsetHeight   返回自身包括padding、边框、内容区的高度，返回数值不带单位
  14. -->
  16. <!DOCTYPE html>
  17. <html lang="en">
  18. <head>
  19.     <meta charset="UTF-8">
  20.     <title>offsetLeft和offsetTop获取元素偏移</title>
  21.     <style>
  22.         * {
  23.             margin: 0;
  24.             padding: 0;
  25.         }
  27.         .father {
  28.             /* position: relative; */
  29.             width: 200px;
  30.             height: 200px;
  31.             background-color: pink;
  32.             margin: 150px;
  33.         }
  35.         .son {
  36.             width: 100px;
  37.             height: 100px;
  38.             background-color: purple;
  39.             margin-left: 45px;
  40.         }
  42.         .w {
  43.             height: 200px;
  44.             background-color: skyblue;
  45.             margin: 0 auto 200px;
  46.             padding: 10px;
  47.             border: 15px solid red;
  48.         }
  49.     </style>
  50. </head>
  51. <body>
  52. <div class="father">
  53.     <div class="son"></div>
  54. </div>
  55. <div class="w"></div>
  56. <script>
  57.     // offset 系列
  58.     var father = document.querySelector('.father');
  59.     var son = document.querySelector('.son');
  60.     // 1.可以得到元素的偏移 位置 返回的不带单位的数值
  61.     console.log(father.offsetTop);
  62.     console.log(father.offsetLeft);
  63.     // 它以带有定位的父亲为准  如果么有父亲或者父亲没有定位 则以 body 为准
  64.     console.log(son.offsetLeft);
  65.     var w = document.querySelector('.w');
  66.     // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
  67.     console.log(w.offsetWidth);
  68.     console.log(w.offsetHeight);
  69.     // 3. 返回带有定位的父亲 否则返回的是body
  70.     console.log(son.offsetParent); // 返回带有定位的父亲 否则返回的是body
  71.     console.log(son.parentNode); // 返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位
  72. </script>
  73. </body>
  74. </html>

2.offset与style区别

  1. <!--
  2. offset可以得到任意样式表中的样式值
  3. offset系列获得的数值是没有单位的
  4. offsetWidth包含padding+border+width
  5. offset等属性是只读属性，只能获取不能赋值
  7. style只能得到行内样式表中的样式值
  8. style.width获得的是带有单位的字符串
  9. style.width获得不包含padding和border的值
  10. style.width是可读属性，可以获得也可以赋值
  12. 所以，我们想要获取元素大小位置，用offset更合适
  13.     想要给元素更改值，则需要用style改变
  14. -->
  15. <!DOCTYPE html>
  16. <html lang="en">
  17. <head>
  18.     <meta charset="UTF-8">
  19.     <title>offset与style区别</title>
  20.     <style>
  21.         .box {
  22.             width: 200px;
  23.             height: 200px;
  24.             background-color: pink;
  25.             padding: 10px;
  26.         }
  27.     </style>
  28. </head>
  30. <body>
  31. <div class="box" style="width: 200px;"></div>
  32. <script>
  33.     // offset与style的区别
  34.     var box = document.querySelector('.box');
  35.     console.log(box.offsetWidth);
  36.     console.log(box.style.width);
  37.     // box.offsetWidth = '300px';
  38.     box.style.width = '300px';
  39. </script>
  40. </body>
  41. </html>

3.获取鼠标在盒子内的坐标

  1. <!--
  2. 获取鼠标在盒子里的坐标：
  3.     用鼠标在页面下的坐标e.pageX和e.pageY减去盒子的坐标this.offsetLeft和this.offsetTop
  4. -->
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <title>获取鼠标在盒子内的坐标</title>
  10.     <style>
  11.         div{
  12.             width: 300px;
  13.             height: 300px;
  14.             background-color: violet;
  15.             margin:200px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <div></div>
  21. <script>
  22.     var div=document.querySelector('div');
  23.     div.addEventListener('mousemove',function (e) {
  24.         console.log(e.pageX);
  25.         console.log(e.pageY);
  26.         console.log(div.offsetLeft);
  27.         console.log(div.offsetTop);
  28.         var x=e.pageX-this.offsetLeft;
  29.         var y=e.pageY-this.offsetTop;
  30.         this.innerHTML='x坐标是'+x+'，y坐标是'+y;
  31.     })
  32. </script>
  33. </body>
  34. </html>

2021.11.06 20:08

4.拖动模态框

  1. <!--
  2. 1.点击弹出层，静态框和遮挡层就会显示出来display:block;
  3. 2.点击关闭按钮，模态框和遮挡层就会隐藏起来display:none;
  4. 在页面的拖拽原理：鼠标按下并移动，之后松开鼠标
  5. 触发事件是鼠标按下mousedown，鼠标移动mousemove鼠标松开mouseup
  6. 拖拽过程：鼠标移动过程中，获得最新的值赋值给模拟框的left和top值，这样模拟框就可以跟着鼠标走了
  7. 鼠标按下触发的事件源是 最上面一行，就是id为title
  8. 鼠标移动，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标，就是模态框的left和top值
  9. 鼠标弹起，就让鼠标移动事件移除
  10. -->
  11. <!DOCTYPE html>
  12. <html lang="en">
  13. <head>
  14.     <meta charset="UTF-8">
  15.     <title>拖动模态框</title>
  16.     <style>
  17.         .login-header {
  18.             width: 100%;
  19.             text-align: center;
  20.             height: 30px;
  21.             font-size: 24px;
  22.             line-height: 30px;
  23.         }
  25.         ul,
  26.         li,
  27.         ol,
  28.         dl,
  29.         dt,
  30.         dd,
  31.         div,
  32.         p,
  33.         span,
  34.         h1,
  35.         h2,
  36.         h3,
  37.         h4,
  38.         h5,
  39.         h6,
  40.         a {
  41.             padding: 0px;
  42.             margin: 0px;
  43.         }
  45.         .login {
  46.             display: none;
  47.             width: 512px;
  48.             height: 280px;
  49.             position: fixed;
  50.             border: #ebebeb solid 1px;
  51.             left: 50%;
  52.             top: 50%;
  53.             background: #ffffff;
  54.             box-shadow: 0px 0px 20px #ddd;
  55.             z-index: 9999;
  56.             transform: translate(-50%, -50%);
  57.         }
  59.         .login-title {
  60.             width: 100%;
  61.             margin: 10px 0px 0px 0px;
  62.             text-align: center;
  63.             line-height: 40px;
  64.             height: 40px;
  65.             font-size: 18px;
  66.             position: relative;
  67.             cursor: move;
  68.         }
  70.         .login-input-content {
  71.             margin-top: 20px;
  72.         }
  74.         .login-button {
  75.             width: 50%;
  76.             margin: 30px auto 0px auto;
  77.             line-height: 40px;
  78.             font-size: 14px;
  79.             border: #ebebeb 1px solid;
  80.             text-align: center;
  81.         }
  83.         .login-bg {
  84.             display: none;
  85.             width: 100%;
  86.             height: 100%;
  87.             position: fixed;
  88.             top: 0px;
  89.             left: 0px;
  90.             background: rgba(0, 0, 0, .3);
  91.         }
  93.         a {
  94.             text-decoration: none;
  95.             color: #000000;
  96.         }
  98.         .login-button a {
  99.             display: block;
  100.         }
  102.         .login-input input.list-input {
  103.             float: left;
  104.             line-height: 35px;
  105.             height: 35px;
  106.             width: 350px;
  107.             border: #ebebeb 1px solid;
  108.             text-indent: 5px;
  109.         }
  111.         .login-input {
  112.             overflow: hidden;
  113.             margin: 0px 0px 20px 0px;
  114.         }
  116.         .login-input label {
  117.             float: left;
  118.             width: 90px;
  119.             padding-right: 10px;
  120.             text-align: right;
  121.             line-height: 35px;
  122.             height: 35px;
  123.             font-size: 14px;
  124.         }
  126.         .login-title span {
  127.             position: absolute;
  128.             font-size: 12px;
  129.             right: -20px;
  130.             top: -30px;
  131.             background: #ffffff;
  132.             border: #ebebeb solid 1px;
  133.             width: 40px;
  134.             height: 40px;
  135.             border-radius: 20px;
  136.         }
  137.     </style>
  138. </head>
  140. <body>
  141. <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
  142. <div id="login" class="login">
  143.     <div id="title" class="login-title">登录会员
  144.         <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
  145.     </div>
  146.     <div class="login-input-content">
  147.         <div class="login-input">
  148.             <label>用户名：</label>
  149.             <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
  150.         </div>
  151.         <div class="login-input">
  152.             <label>登录密码：</label>
  153.             <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
  154.         </div>
  155.     </div>
  156.     <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
  157. </div>
  158. <!-- 遮盖层 -->
  159. <div id="bg" class="login-bg"></div>
  160. <script>
  161.     var login=document.querySelector('.login');
  162.     var mask=document.querySelector('.login-bg');
  163.     var link=document.querySelector('#link');
  164.     var closeBtn=document.querySelector('#closeBtn');
  165.     //点击弹出层这个链接link 让mask和login显示出来
  166.     link.addEventListener('click',function () {
  167.         login.style.display='block';
  168.         mask.style.display='block';
  169.     })
  170.     //点击closeBtn就隐藏mask和login
  171.     closeBtn.addEventListener('click',function () {
  172.         mask.style.display='none';
  173.         login.style.display='none';
  174.     })
  176. //拖拽页面
  177.     var title=document.querySelector('#title');
  178.     title.addEventListener('mousedown',function (e) {
  179.         var x=e.pageX-login.offsetLeft;
  180.         var y=e.pageY-login.offsetTop;
  181.         //鼠标移动，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标，就是模态框的left和top值
  182.         document.addEventListener('mousemove',move);
  183.             function move(e) {
  184.             login.style.left=e.pageX-x+'px';
  185.             login.style.top=e.pageY-y+'px';
  186.         }
  187.         //鼠标弹起，就让鼠标移动事件移除
  188.         document.addEventListener('mouseup',function (e) {
  189.             document.removeEventListener('mousemove',move);
  190.         })
  191.     })
  193. </script>
  194. </body>
  195. </html>

5.client系列

动态获取该元素的边框大小、元素大小等
element.clientTop 返回元素上边框的大小
element.clientLeft 返回元素左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight 返回自身包含padding、内容区的高度，不含边框，返回数值不带单位

offset系列获得的数值是没有单位的
offsetWidth包含padding+border+width

6.立即执行函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>立即执行函数</title>
  6. </head>
  7. <body>
  8. <script>
  9.     //立即执行函数:不需要调用，立马能够自己执行的函数
  10.     function fn(){
  11.         console.log(1);
  12.     }
  13.     fn();
  14.     //写法
  15.     // (function() {}) () 或者(function(){}());
  16.     (function (a) {
  17.         console.log(a);
  18.     })(2);//第二个小括号可以看做是调用函数,可以传参数
  20.         (function (a,b) {
  21.             console.log(a+b);
  22.         } (2,3))
  23.     //立即执行函数最大的作用就是 独立创建了一个作用域，里面的所有变量都是局部变量，不会影响运行
  24. </script>
  25. </body>
  26. </html>

2021.11.07 16:15