JS获取窗口属性，获取DOM尺寸

查看滚动条的滚动距离

• window.pageXOffset/pageYOffset(IE8及以下不兼容)
• document.body.scrollLeft/scrollTop(兼容性较乱)
• document.documentElement.scrollLeft/scrollTop(兼容性较乱)
  注：后两个兼容性较乱，但在IE8及以下浏览器二者必有一可用。

//可以这样使用
document.body.scrollLeft + document.documentElement.scrollLeft

• 封装兼容方法getScrollOffset

function getScrollOffset(){
  if(window.pageXOffset){
    return {
     x: window.pageXOffset,
     y: window.pageYOffset
    }
  }else{
    return{
      x: document.body.scrollLeft +document.documentElement.scrollLeft,
      y: document.body.scrollTop +document.documentElement.scrollTop,
    }
  }
}

可视区域窗口

• 宽window.innerWidth/高window.innerHeight（IE8及以下不兼容）
• document.documentElement.clientWidth/clienHeight(标准模式下，任意浏览器都兼容)
• document.body.clientWidth/clienHeight(怪异模式兼容)

• 封装兼容性方法，返回浏览器尺寸getViewportOffset()

  function getViewportOffset(){
  if(window.innerWidth){
    return{
     w: window.innerWith,
     h: window.innerHeight
    }
  } else{
      if(document.compatMode === "BackCompat"){
        return{
         w: document.body.clientWidth,
         h: document.body.clientHeight
        }
      }else{
          return{
              w: document.documentElement.clientWidth,
              h:document.documentElement.clientHeight
          }  
      }
  }
  }
  

  查看元素几何尺寸

• domEle.getBoundingClientRect();

  • 兼容性好
  • 返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本IE未实现（可以用上面的方法减）
  
  • 返回结果不是实时的

查看元素尺寸(视觉上的)

• dom.offsetWidth,dom.offsetHeight

查看元素的位置

• dom.offsetLeft,dom.offsetTop
  
  • 对于无定位父级的元素，返回相对文档的坐标。对于有定位的父级返回相对于最近的有定位的父级的坐标
• dom.offsetParent
  
  • 返回最近有定位的父级。如无，返回body,body.offsetParent返回null
  • eg:求元素相对于文档的坐标getElementPosition

让滚动条滚动

• window上有三个方法：让滚动条滚动到某一点scroll(x,y)、scrollTo()。scrollBy(x,y)有累加效果

脚本化CSS

读写元素CSS属性

• dom.style.prop
  
  • 可读写行间样式，无兼容性问题，遇到float这样的保留字属性，前面加css
  • 符合属性必须拆解，组合单词变小驼峰式
  • 写入的值需是字符串

查询样式计算

• window.getComputedStyle(ele,null)

  扫描二维码关注公众号，回复： 3155981 查看本文章
  • 计算样式只读
  • 返回的计算样式都是绝对值，无相对单位
  • 第二个参数可以填伪元素，获取伪元素的样式。但不能写。
    想改变，可以在样式里写不同类名，通过更换元素类名实现更改。
  • IE8及以下不兼容

  IE独有：ele.currentStyle

  • 计算样式只读，返回的样式不是经过转换的绝对值
  • 封装兼容性方法getStyle(elem,prop);