三大家族對(duì)比 易混淆

1. offset

• offsetLeft = 最近的有定位的祖先元素的左邊距離 如果祖先元素都沒(méi)有定位就以body為參考點(diǎn)
• offsetTop = 最近的有定位的祖先元素的上邊距離 如果祖先元素都沒(méi)有定位就以body為參考點(diǎn)

2. client

• clientLeft = 獲取盒子的左邊框的寬度
• clientTop = 獲取盒子的上邊框的寬度

3. scroll

• scrollLeft = 內(nèi)容被卷去的左邊距離
• scrollTop = 內(nèi)容被卷去的上邊距離

三大家族屬性及用途一覽表.png

• clientHeight offsetHeight ScrollHeight對(duì)比

  
  
  clientHeight offsetHeight ScrollHeight對(duì)比.png

• 綜合比較. 較為復(fù)雜(假設(shè)祖先定位元素為body)

  
  
  三大家族綜合比較.jpg

onresize

• 當(dāng)屏幕尺寸發(fā)生變化時(shí)調(diào)用

• 用于做自適應(yīng)

 var obody = document.body;

    // 只要窗口尺寸發(fā)生改變就會(huì)調(diào)用
    window.onresize = fn;

    fn();

    function fn() {
        // 應(yīng)用：當(dāng)屏幕的寬度>=960時(shí)，頁(yè)面的背景顏色為紅色；當(dāng)屏幕的寬度小于960  >=640時(shí)，頁(yè)面的背景顏色為藍(lán)色；當(dāng)屏幕的寬度<640時(shí)，頁(yè)面的背景顏色為綠色
        if (client().width >= 960) {
            obody.style.backgroundColor = 'red';
        } else if (client().width >= 640) {
            obody.style.backgroundColor = 'blue';
        } else {
            obody.style.backgroundColor = 'green';
        }
    }

    /**
     * 獲取瀏覽器可視區(qū)域的高度/寬度
     *
     * @returns {*}
     */
    function client() {
        if(window.innerWidth || window.innerHeight){
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else if(document.compatMode == 'CSS1Compat'){
            // 是w3c標(biāo)準(zhǔn)
            return{
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }else {
            return{
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }
    }

函數(shù)節(jié)流

• 作用 : 提升性能.

• 用于頻繁調(diào)用的函數(shù), 降低其執(zhí)行的頻率

• eg. 低級(jí)函數(shù)節(jié)流 : 用一次定時(shí)器

var timer = null;
window.onresize = function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        waterFull();
        console.log(2);
    },200);
    console.log(1);
}

微博分享

• 獲取選中文字

var selectedText;
if(window.getSelection){
    // 標(biāo)準(zhǔn)模式 獲取選中的文字
    selectedText = window.getSelection().toString();
}else{
    // IE 系列
    selectedText = document.selection.createRange().text;

• 微博分享的鏈接

http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText + '&url=[http://www.itdecent.cn/u/ce8eba0dbfb6'](http://www.itdecent.cn/u/ce8eba0dbfb6') 

• 打開(kāi)新窗口- 動(dòng)態(tài)跳轉(zhuǎn)

//window.location.href = url;
/*
  * 第一個(gè)參數(shù)是url
  * 第二個(gè)參數(shù)是窗口的名稱(chēng) 要不要打開(kāi)新的窗口
  * 第三個(gè)參數(shù)是窗口的描述 窗口的位置,尺寸等
  * */
  window.open('http://www.itdecent.cn/u/ce8eba0dbfb6','newWindow','left=500,top=200,width=800,height=500');

• 一定要清除上次選中

// 清空上一次選中
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
selectedText = '';

webstorm活動(dòng)模板

webstorm活動(dòng)模板設(shè)置方法截圖.png