JS随手笔记2

位置的获取

• offsetX/offsetY: 事件触发相对于当前元素自身的位置(包括padding为正，border为负)
• clientX/clientY: 事件触发相对于浏览器可视区域的位置 (不包括滚动出去的范围的)
• pageX/pageY: 事件触发相对于整个网页的位置 (包括滚动出去的范围的)
• screenX/screenY: 事件触发相对于屏幕的位置（不常用）

    * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 100px;
        height: 100px;
        margin-left: 50px;
        margin-top: 50px;
        padding: 20px;
        border: 30px solid #cccccc;
        background-color: red;
      }

位置

样式获取

• getComputedStyle : 获取最终样式

var style = getComputedStyle(oDiv);
     通过getComputedStyle获取宽高不包括 边框和内边距
     只支持获取, 不支持设置
     只支持IE9及以上浏览器

• currentStyle : 获取样式

var style = oDiv.currentStyle;
     通过currentStyle获取宽高不包括 边框和内边距
     只支持获取, 不支持设置
     只支持IE9及以下浏览器

• style : 获取样式

oDiv.style.width = "100px";
     通过style获取宽高不包括 边框和内边距
     只能获取内设置的宽高
     支持获取和设置
     高低级浏览器都兼容

宽高获取

• offsetWidth和offsetHeight 获取元素宽高
  边框 + 内边距 + 元素宽高

• clientWidth和clientHeight 获取元素宽高
  获取的宽高包含 内边距 + 元素宽高

• scrollWidth和scrollHeight 获取元素宽高
  内容没有超出元素范围时
  scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
  scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
  内容超出元素范围时
  scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
  scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度

位置获取

• offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body
• clientLeft/clientTop: 左边框 和 顶部边框
• scrollTop / scrollLeft: 超出元素内边距 顶部 和 左边 的距离

网页高度获取

• window.innerWidth/window.innerHeight: 在IE9以及IE9以上的浏览器中才能获取
• document.documentElement.clientWidth / document.documentElement.clientHeight:
  在IE9以下的浏览器的标准模式中获取
• document.body.clientWidth / document.body.clientHeight:
  在IE9以下的浏览器的怪异模式中获取

注：html文档中有 为标准模式，否则为怪异模式

document.compatMode === "CSS1Compat" // 标准渲染模式
document.compatMode === "BackCompat" // 怪异渲染模式

兼容写法：获取网页高度 / 宽度

function getScreen() {
        let width, height;
        if(window.innerWidth){
            width = window.innerWidth;
            height = window.innerHeight;
        }else if(document.compatMode === "BackCompat"){
            width = document.body.clientWidth;
            height = document.body.clientHeight;
        }else{
            width = document.documentElement.clientWidth;
            height = document.documentElement.clientHeight;
        }
        return {
            width: width,
            height: height
        }
    }

兼容写法：获取屏幕滚动高度 / 宽度

    function getPageScroll() {
        let x, y;
        if(window.pageXOffset){
            x = window.pageXOffset;
            y = window.pageYOffset;
        }else if(document.compatMode === "BackCompat"){
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }else{
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        }
        return {
            x: x,
            y: y
        }
    }

函数防抖和节流

• 函数防抖

    /**
     * 函数防抖 - 只会执行一次，只能看到结果
     * @param {*} callback
     * @param {*} delay
     */
    function debounce(callback, delay) {
        let timerId = null;
        return function () {
            let that = this;
            let args = arguments;
            timerId && clearTimeout(timerId);
            timerId = setTimeout(function () {
                callback.apply(that, args);
            }, delay || 1000);
        }
    }

• 函数节流

    /**
     * 函数节流 - 会执行几次不等，能看到过程
     * @param {*} callback
     * @param {*} delay
     */
    function throttle(callback, delay) {
        let timerId = null;
        let flag = true;
        return function () {
            if(!flag) return;
            flag = false;
            let that = this;
            let args = arguments;
            timerId && clearTimeout(timerId);
            timerId = setTimeout(function () {
                flag = true;
                callback.apply(that, args);
            }, delay || 1000);
        }
    }

END