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;
      }

    <div></div>
    <script>
      let oDiv = document.querySelector("div")
      oDiv.onclick = function (event) {
        event = event || window.event
        console.log("offsetX " + event.offsetX)
        console.log("offsetY " + event.offsetY)
        console.log("-----------------------")
        console.log("clientX " + event.clientX)
        console.log("clientY " + event.clientY)
        console.log("-----------------------")
        console.log("pageX " + event.pageX)
        console.log("pageY " + event.pageY)
        console.log("-----------------------")
      }
    </script>

位置

样式获取

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文档中有 <!DOCTYPE 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