其他关于长宽

window.innerWidth和innerHeight

  • 表示文档显示区域的宽高，不包括工具栏和地址栏等区域；

image.png

window.pageYOffset和pageXOffset

ie9往后才支持的“被卷去”的长度
image.png

鼠标事件对象event

BOM各种长宽的总结 - 图3

元素偏移量offset

offset 概述

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小（宽度高度）
  • 注意：返回的数值都不带单位

image.png
image.png

offset 与 style 区别

【1】offset

  • offset 可以得到任意样式表中的样式值
  • offset 系列获得的数值是没有单位的
  • offsetWidth 包含padding+border+width
  • offsetWidth 等属性是只读属性，只能获取不能赋值

    所以，我们想要获取元素大小位置，用offset更合适

【2】style

  • style 只能得到行内样式表中的样式值
  • style.width 获得的是带有单位的字符串
  • style.width 获得不包含padding和border 的值
  • style.width 是可读写属性，可以获取也可以赋值

    所以，我们想要给元素更改值，则需要用style改变 因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

Demo：获取鼠标在盒子内的坐标

image.png

  1. box.addEventListener('mousemove',function(e){
  2.   if(e.pageX > (box_left + box.width)){
  3.     var ture_width = e.pageX - box_left +box_width;
  4.   } else {var ture_width = e.pageX - box_left;}
  5.   if(e.pageY > (box_top + box_height)){
  6.     var ture_height = e.pageY - box_top + box_height;
  7.   }else {var ture_height = e.pageY - box_top;}
  8.   this.innerHTML = 'x坐标是' + ture_width + ' y坐标是' + ture_height;
  9. })

Demo：模态框拖拽

image.png

  1. <!DOCTYPE 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>Document</title>
  8.     <style>
  9.         * {
  10.             padding: 0px;
  11.             margin: 0px;
  12.         }
  13.         a {
  14.             text-decoration: none;
  15.             color: #000000;
  16.         }
  17.         .login-header {
  18.             width: 100%;
  19.             text-align: center;
  20.             height: 30px;
  21.             line-height: 30px;
  22.             font-size: 24px;
  23.         }
  24.         .login-bg {
  25.             display: none;
  26.             width: 100%;
  27.             height: 100%;
  28.             position: fixed;
  29.             top: 0px;
  30.             left: 0px;
  31.             background: rgba(0, 0, 0, .3);
  32.         }
  33.         .login {
  34.             display: none;
  35.             width: 512px;
  36.             height: 280px;
  37.             position: fixed;
  38.             left: 50%;
  39.             top: 50%;
  40.             z-index: 9999;
  41.             border: #ebebeb solid 1px;
  42.             background-color: #ffffff;
  43.             box-shadow: 0px 0px 20px #ddd;
  44.             transform: translate(-50%, -50%);
  45.         }
  46.         .login-title {
  47.             width: 100%;
  48.             margin: 10px 0 0 0;
  49.             text-align: center;
  50.             line-height: 40px;
  51.             height: 40px;
  52.             font-size: 18px;
  53.             position: relative;
  54.             cursor: move;
  55.         }
  56.         .login-title span {
  57.             position: absolute;
  58.             width: 40px;
  59.             height: 40px;
  60.             font-size: 12px;
  61.             background: #ffffff;
  62.             border: #ebebeb solid 1px;
  63.             right: -20px;
  64.             top: -30px;
  65.             border-radius: 50%;
  66.         }
  67.         .login-input-content {
  68.             margin: 20px 0 0 0;
  69.         }
  70.         .login-input {
  71.             overflow: hidden;
  72.             margin: 0px 0px 20px 0px;
  73.         }
  74.         .login-input label {
  75.             float: left;
  76.             width: 90px;
  77.             padding-right: 10px;
  78.             text-align: right;
  79.             line-height: 35px;
  80.             height: 35px;
  81.             font-size: 14px;
  82.         }
  83.         .login-input input.list-input {
  84.             float: left;
  85.             line-height: 35px;
  86.             height: 35px;
  87.             width: 350px;
  88.             border: #ebebeb 1px solid;
  89.             text-indent: 5px;
  90.         }
  91.         .login-input input.button-login {
  92.             display: block;
  93.             border: 1px #ebebeb solid;
  94.             height: 35px;
  95.             width: 50%;
  96.             margin: 20px auto;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101.     <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
  102.     <div id="loginBg" class="login-bg"></div>
  103.     <div id="login" class="login">
  104.         <div class="login-title" >登录会员
  105.             <span><a id="closeBtn" href="javascript:; " class="close-login">关闭</a></span>
  106.         </div>
  107.         <div class="login-input-content">
  108.             <div class="login-input">
  109.                 <label>用户名：</label>
  110.                 <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
  111.             </div>
  112.             <div class="login-input">
  113.                 <label>登录密码：</label>
  114.                 <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
  115.             </div>
  116.             <div class="login-input">
  117.                 <input type="button" class="button-login" value="登录会员"/>
  118.             </div>
  119.         </div>
  120.     </div>
  121.     <script>
  122.         var link = document.getElementById('link');
  123.         var loginBg = document.getElementById('loginBg');
  124.         var login = document.getElementById('login');
  125.         var closeBtn = document.getElementById('closeBtn');
  126.         link.addEventListener('click',function(){
  127.             loginBg.style.display = 'block';
  128.             login.style.display = 'block';
  129.         })
  130.         closeBtn.addEventListener('click',function(){
  131.             loginBg.style.display = 'none';
  132.             login.style.display = 'none';
  133.         })
  134.         login.addEventListener('mousedown', function(e){
  135.             var x = e.pageX - login.offsetLeft;
  136.             var y = e.pageY - login.offsetTop;
  137.             document.addEventListener('mousemove', move)
  139.             function move(e) {
  140.                 login.style.left = e.pageX - x + 'px';
  141.                 login.style.top = e.pageY - y + 'px';
  142.             }
  143.             document.addEventListener('mouseup', function() {
  144.                 document.removeEventListener('mousemove', move);
  145.             })
  146.         })
  147.     </script>
  148. </body>
  149. </html>

元素可视区 client 系列

client概述

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

淘宝 flexible.js 源码分析

  • 立即执行函数 (function(){})() 或者 (function(){}())
  • 主要作用： 创建一个独立的作用域。 避免了命名冲突问题
  • 下面三种情况都会刷新页面都会触发 load 事件。
    • a标签的超链接
    • F5或者刷新按钮（强制刷新）
    • 前进后退按钮

      但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件

注意这个事件给window添加。

  1. (function flexible(window, document) {
  2.     // 获取的html 的根元素
  3.     var docEl = document.documentElement
  4.         // dpr 物理像素比
  5.     var dpr = window.devicePixelRatio || 1
  7.     // adjust body font size  设置我们body 的字体大小
  8.     function setBodyFontSize() {
  9.         // 如果页面中有body 这个元素 就设置body的字体大小
  10.         if (document.body) {
  11.             document.body.style.fontSize = (12 * dpr) + 'px'
  12.         } else {
  13.             // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
  14.             // 的字体大小
  15.             document.addEventListener('DOMContentLoaded', setBodyFontSize)
  16.         }
  17.     }
  18.     setBodyFontSize();
  20.     // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
  21.     function setRemUnit() {
  22.         var rem = docEl.clientWidth / 10
  23.         docEl.style.fontSize = rem + 'px'
  24.     }
  26.     setRemUnit()
  28.     // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
  29.     window.addEventListener('resize', setRemUnit)
  30.         // pageshow 是我们重新加载页面触发的事件
  31.     window.addEventListener('pageshow', function(e) {
  32.         // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
  33.         if (e.persisted) {
  34.             setRemUnit()
  35.         }
  36.     })
  38.     // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
  39.     if (dpr >= 2) {
  40.         var fakeBody = document.createElement('body')
  41.         var testElement = document.createElement('div')
  42.         testElement.style.border = '.5px solid transparent'
  43.         fakeBody.appendChild(testElement)
  44.         docEl.appendChild(fakeBody)
  45.         if (testElement.offsetHeight === 1) {
  46.             docEl.classList.add('hairlines')
  47.         }
  48.         docEl.removeChild(fakeBody)
  49.     }
  50. }(window, document))

元素滚动 scroll 系列

scroll 概述

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

页面被卷去的头部

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

页面被卷去的头部兼容性解决方案

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

  1. 声明了 DTD，使用 document.documentElement.scrollTop
  2. 未声明 DTD，使用 document.body.scrollTop
  3. 新方法 window.pageYOffset和 window.pageXOffset，IE9 开始支持

  4. 微信里面浏览也会有相关兼容性的问题，所以需要兼容行解决

    1. function getScroll() {
    2.  return {
    3.    left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
    4.    top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    5.  };
    6. } 
    7. 使用的时候  getScroll().left

    三大系列总结

    image.png
    他们主要用法：

  5. offset系列 经常用于获得元素位置 offsetLeft offsetTop

  6. client经常用于获取元素大小 clientWidth clientHeight
  7. scroll 经常用于获取滚动距离 scrollTop scrollLeft
  8. 注意页面滚动的距离通过 window.pageXOffset 获得