1. 如何查看滚动条的滚动距离？单位是什么？怎么封装？

查看滚动条的滚动距离

横向：console.log(window.pageXOffset)
纵向：window.pageYOffset
IE8及以下不兼容
document.body.scrollLeft / scrollTop
document.documentElement.scrollLeft / scrollTop
但是不同时有效，比如body的生效时，documentElement的就是0
所以可以封装成一个方法，直接相加。

封装一个方法：

  1. function getScrollOffset() {
  2.     if (window.pageXOffset) {
  3.         return {x: window.pageXOffset, y: window.pageYOffset}
  4.     } else {
  5.         return {
  6.             x: document.body.scrollLeft +
  7.                 document.documentElement.scrollLeft,
  8.             y: document.body.scrollTop +
  9.                 document.documentElement.scrollTop
  10.         }
  11.     }
  12. }

把他封装成一个tools.jsp
然后在新文件的head中添引用：

  1. <script type='text/javascript' src='tools.js'></script>

2. 如何查看当前可视窗口的大小？标准和怪异是啥？怎么封装？

查看可视窗口的尺寸

注意：一个是window，一个是document
window.innerWidth / innerHeight
IE8及以下不兼容及以下不兼容
标准模式下，任意浏览器都兼容
document.documentElement.clientWidth / clientHeight
适用于怪异模式下的浏览器
document.body.clientWidth / clientHeight

区别和标准和怪异：第一行是否是 < !DOCTYPE html >, 没有就怪异

  1. function getViewportOffset() {
  2.     if (window.innerWidth) {
  3.         return {w: window.innerWidth, h: window.innerHeight}
  4.     } else {
  5.         if (document.compatMode === 'BackCompat') {
  6.             return {
  7.                 w: document.body.clientWidth,
  8.                 h: document.body.clientHeight
  9.             }
  10.         } else {
  11.             return {
  12.                 w: document.documentElement.clientWidth,
  13.                 h: document.documentElement.clientHeight
  14.             }
  15.         }
  16.     }
  17. }

3. 怎么查看一个元素自身的尺寸？位置？有定位的父级？

返回元素自身的尺寸

  1. div.offsetWidth
  2. div.offsetHight

返回元素的位置（相对于最近的有定位的父级元素）

有定位什么意思呢？就是有position属性

  1. div.offsetLeft
  2. div.offsetTop

返回元素最近的有定位的父级元素

  1. div.offsetParent

4. 如何让元素滚动到特定位置?滚动一段距离呢?怎么实现自动阅读?

让滚动条滚动

  1. scroll(x, y)
  2. scrollTo(x, y)

将x，y滚动到指定位置

  1. scrollBy(x, y)

将x，y滚动一定距离，这个实现的是累加
实现自动阅读，key表示加锁。如果没有锁，多次点击start会
使得速度越来越快，而且点击stop之后，清除不了

  1. start.onclick = function () {
  2.     if (key) {
  3.         timer = setInterval(function () {
  4.             window.scrollBy(0, 10);
  5.         }, 100);
  6.         key = false;
  7.     }
  8. }
  9. stop.onclick = function () {
  10.     clearInterval(timer);
  11.     key = true;
  12. }

5. 如何修改元素css属性?怎么看到一个元素的css属性？怎么看到他的伪元素属性呢？一般css修改前和修改后的样式怎么做到呢？

控制css实现对样式的修改

div.style.这个实现的是对行间样式的修改这个实现的是对行间样式的修改
值得注意的就是1.复合属性必须修改，2.碰到保留字加上css前缀
比如div.style.border = “1px,solid,red”, 拆开就是
float— > cssFloat
但是不改也没事，所以了解一下就行，可以不记

查询计算样式：

  1. window.getComputedStyle(div, null);

只读，返回的值是绝对值，没有相对单位
IE8及以下不兼容及以下不兼容

  1. console.log(window.getComputedStyle(div, null).width);

还有一个IE独有的属性：div.currentStyle.width 这个可以不记，用到再查
后面的null是什么呢？是伪元素

  1. window.getComputedStyle(div, "after").width

通过这个获得的就是div后面的伪元素after的宽度

div.style.width和window.getComputedStyle(div, null).width哪个好？
后者更好：因为后者返回的是样式最终的数据，而前者只是行间数据，并不一定是最终数据
很重要：

用js改变css一般都是写两个样式(改变前，改变后)

当需要改变的时候直接改变类名实现改变样式
为什么不用div.style.呢？因为这个有两个点，中间会经过复杂的调用，影响效率