04 - 三大家族&&区别

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

----------------- offset ---------------------

---

自定义动画

animation: flash 0.5s alternate infinite
/*自定义动画*/
@keyframes flash {
    0%{opacity: 0;}
    100%{opacity: 1;}
}

• 延迟执行动画
  start.style.animationDelay = delay + 's';

Underscore-min.js

Underscore封装了常用的JavaScript对象操作方法，用于提高开发效率。我们可以将它单独运用到任何一个页面，另外，Underscore还可以被使用在Node.js运行环境。

Underscore中有许多方法在JavaScript1.6中已经被纳入规范，因此在Underscore对象内部，会优先调用宿主环境提供的内置方法（如果宿主环境已经实现了这些方法），以此提高函数的执行效率。

Underscore默认使用_（下划线）来访问和创建对象。

offset家族特点

• 只能取值，不能设置值
• 获取的结果是数值，不是字符
• 获取的时候不需要style

---

图解

网页可见区域宽： document.body.clientWidth;

网页可见区域高： document.body.clientHeight;

网页可见区域宽： document.body.offsetWidth (包括边线的宽);

网页可见区域高： document.body.offsetHeight (包括边线的宽);

网页正文全文宽： document.body.scrollWidth;

网页正文全文高： document.body.scrollHeight;

网页被卷去的高： document.body.scrollTop;

网页被卷去的左： document.body.scrollLeft;

---

offsetWidth和offsetHeight

• offsetWidth / offsetHeight
• 得到对象的宽度和高度(自己的 , 与他人无关),包括内容,边框,和内边距

//offsetWidth = width + border + padding
div{ width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 10

• 注意:和 div.style.width 的区别，其只能获取到行内的数值

offsetLeft和offsetTop

• 返回距离上级盒子(带有定位)左边的位置 只有左上
• 如果父辈元素都没有定位 则以body为准
• offsetLeft 从父亲的padding开始算 父亲的border不算.即：从子盒子边框到定位父盒子边框的距离。

---

图解

图解 以body为准

• 如果父辈元素有定位 则以定位的父辈元素为准

以定位的父辈元素为准

offsetParent

• 返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷：
• 如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。
• 注意：和parentNode的区别？
• parentNode指的是父节点，element.parentNode,获取某一个元素的父节点，这里的父节点呢，只有一个，就是指的是最临近的直接父节点.
• offsetParent 这里的父节点，指的是相对于父节点，也就是说某个元素相对于谁定位，谁就是他的父亲。
  和它很相似的属性还有offsetLeft \ offsetTop ，他们指的是前元素到offsetParent的距离。

offsetXXX 和 style.XXX的区别

• 用offsetLeft和style.left来分析，其他的以此类推：
  a) style.left只能获取行内的，而offsetLeft则可以获取到所有的； b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left; c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px; 注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300 d) offsetLeft是只读的，而style.left是可读写； e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

附小Demo两个 帮助更好的理解

• 弹性菜单案例 点击查看
• 如影随形案例 点击查看

---

----------------- scroll ---------------------

---

核心技术点

• 1）求滚动条的长度？
• 2）拖动滚动条，求内容要走多少？
• 滚动条的长度取决于滚动内容（滚动内容越长，滚动条越短）；
• 内容滚动的距离和滚动条走的距离是成倍数关系。

换算公式

• 获取滚动条的长度：

  • 滚动条的长度 / 盒子的长度 = 盒子的长度 / 内容的长度

  • 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度

• 拖动滚动条，求内容走的长度
  • 内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度)
  • 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离

内置对象document

• Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
• Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问:
  document.head（获取头部）
  document.body（获取身体）
  document.title （获取标题）
  document.documentElement（获取整个html)
• Document.compatMode:
  BackCompat：标准兼容模式关闭
  • 浏览器宽度:document.body.clientWidth
• CSS1Compat：标准兼容模式开启
  • 浏览器宽度:document.documentElement.clientWidth
  • BackCompat 对应 quirks mode(怪异模式) , CSS1Compat 对应 strict mode (严格模式) ：

早期的浏览器Netscape 4和Explorer 4对css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode(怪异模式)，但随着W3C的标准越来越重要，众多的浏览器开始依照W3C标准解析CSS，仿照W3C标准解析CSS的模式我们叫做strict mode(严格模式) 。

scroll家族

• 网页正文全文宽： document.body.scrollWidth;

• 网页正文全文高： document.body.scrollHeight;

• 网页被卷去的高： document.body.scrollTop;

• 网页被卷去的左： document.body.scrollLeft;

• 在实际开发中使用比较多的就是scrollTop，如下图：

图解scrollTop

处理scroll家族浏览器适配问题

• ie9+ 和 最新浏览器
  window.pageXOffset; （scrollLeft） window.pageYOffset; （scrollTop）

• Firefox浏览器 和 其他浏览器
  document.documentElement.scrollTop;

• Chrome浏览器 和 没有声明 DTD <DOCTYPE >
  document.body.scrollTop;

• 兼容写法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

scrollTo(x,y)

• 把内容滚动到指定的坐标
• 格式：scrollTo(xpos,ypos)
  • xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；
  • ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标 。
• 网页大部分都没有水平滚动条，所以，这个x 不太常用

滚动事件

• 滚动的触发对象：是window

• 滚动事件：onscroll

• 滚动的距离的获取

// 为了兼容，我们一般采取或运算符
document.body.scrollTop || document.documentElement.scrollTop

• 定位跟随：我们可以通过获取offsetTop值和滚动的距离进行比较，如果当滚动的距离大于我们的offset值，我们就直接设置位置为固定位置，然后直接设置top = 0;如果要是小于的话，我们恢复原来的位置

注意点：不要在滚动监听的过程中获取offset值,因为在过程中获取的话,offset值会有所变动

兼容

<script>
    window.onscroll = function(){
       var top = document.body.scrollTop || document.documentElement.scrollTop;
        console.log(top);
    }
</script>

实现瀑布流滚动

**瀑布流滚动**

---

--------------------------- 区别 ----------------------

---

三大家族的区别

<script>
    window.onload = function(){
        var box = document.getElementById('box');
        // width 和 height
        // 自身内容的宽度/高度 + 内边距 + 边框
        console.log('offset' + box.offsetWidth, box.offsetHeight);
        // 自身内容的宽度/高度 + 内边距
        console.log('client' + box.clientWidth, box.clientHeight);
        // 滚动内容撑起来的宽度 和 高度
        console.log('scroll' + box.scrollWidth, box.scrollHeight);

        // left 和 top
        // 距离第一个有定位的父盒子左边和上边的距离
        console.log('offset' + box.offsetLeft, box.offsetTop);
        // 左边框 和 上边框
        console.log('client' + box.clientLeft, box.clientTop);
        // 水平和垂直滚动的距离
        console.log('scroll' + box.scrollLeft, box.scrollTop);
    }
</script>

offset、client和scroll的区别分析

• left和top分析：

  • clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度

  • offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离

  • scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

• width和height分析

  • clientWidth/Height: 内容 + 内边距

  • offsetWidth/Height: 内容 + 内边距 + 边框

  • scrollWidth/Height: 滚动内容的宽度和高度

图解

**图解**

clientWidth / scrollWidth / offsetWidth区别

• clientWidth:是对象看到的宽度（不含边线,即border）
• scrollWidth:是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）
• offsetWidth:是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）
• scrollHeight: 获取对象的滚动高度。
• scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
• scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度
• offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度
• offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
• offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

易混淆点：

• **clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 **

• **clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 **

• **offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 **

• **offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 **

• **screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 **

• screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
  x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。 y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。

• document.documentElement.scrollTop 垂直方向滚动的值

• event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量