js----盒模型屬性

JS盒子模型屬性

• JS盒子模型 經過JS中的屬性和方法獲取元素的屬性信息
• client
  • clientWidth / clientHeight
    • clientWidth 內容寬度 + 左右padding
    • clientHeight 內容高度 + 上下padding
  • clientLeft / clientTop
    • clientLeft 左邊框
    • clientTop 上邊框
  • offsetWidth / offsetHeight
    • offsetWidth = clientWidth(內容寬+左右padding) + 左右邊框
    • offsetHeight = clientHeight(內容高+上下padding) + 上下邊框
• scoll系列 - scrollLeft(橫向滾動條捲去的距離) - scrollTop(縱向滾動條捲去的距離) - 滾動條 捲去的距離，默認是0，具體是多少要看滾動條滾動了多少
• 獲取瀏覽器的窗口滾動的距離 let sc = document.documentElement.scrollTop || document.body.scrollTop;
  • scrollHeight/scrollWidth
    • 沒有溢出時：scrollHeight/scrollWidth 等於 clientHeight/clientWidth
    • 內容溢出時：scrollHeight = clientHeight + 溢出內容高度;
    • 內容溢出時：scrollWidth= clientWidth + 溢出內容高度;
• 獲取瀏覽器窗口的盒模型屬性

let winW = document.documentElement.clientWidth || document.body.clientWidth;
let winH = document.documentElement.clientHeight || document.body.clientHeight;

function win(attr, val) {
 if (typeof val !== "undefined") {
   document.documentElement[attr] = document.body[attr] = val;
 }
 return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));
複製代碼

• 偏移值 offsetLeft和offsetTop
• 父級參照物 距離當前元素最近的有定位屬性的父級元素，若是沒有的話默認 body

封裝win方法

function win(attr, val) {
  if (typeof val !== "undefined") {
    // 傳2個值的時候是設置，傳一個值是獲取
    document.documentElement[attr] = document.body[attr] = val;
  }
  return document.documentElement[attr] || document.body[attr];
}
console.log(win('scrollTop'));
console.log(win('screenTop', 1000));
複製代碼

計算生效的樣式

• ele.style(可讀可寫) 只能獲取或設置行內樣式

box.stytle.xxx
box.style.xxx = xxx
複製代碼

• 獲取瀏覽器最終計算生效後的樣式 window.getComputedStyle(元素對象，僞類) 不須要僞類 寫null
• 返回一個對象 對象中包含該元素全部的樣式
• IE6-8不支持該語法
• IE中獲取計算過的生效樣式 元素對象.currentStyle屬性 屬性值是一個對象 存儲了該元素生效的全部樣式

封裝getCss方法 並處理兼容問題

// 優化：去除單位、同一 透明度樣式：
function getCss(ele, attr) {
  var value;
  if ('getComputedStyle' in window) {
    value = window.getComputedStyle(ele, null)[attr];
  } else {
    // 判讀獲取的屬性是不是透明度，若是是須要給IE的透明度屬性進行特殊處理
    if (attr === 'opacity') {
      value = ele.currentStyle['filter'];
      var reg2 = /^alpha\(opacity=(.+)\)$/;
      value = reg2.exec(value)[1] / 100;
    } else {
      value = ele.currentStyle[attr];
    }
  }

  // 去除單位: 只有是數字帶單位的狀況下才須要去除單位
  var reg = /^-?\d+(\.\d+)?(px|pt|rem|em)$/i;
  if (reg.test(value)) {
    value = parseFloat(value);
  }
 }
console.log(getCss(box, 'width'));
console.log(getCss(box, 'opacity'));
複製代碼

圖片懶加載 在某個合適的時機去加載這張圖片 通常是圖片進入瀏覽器可視區域或者即將進入可視區域

• 原理
  • 實現延時加載，不直接給 img 標籤設置 src 屬性，而是選擇自定義其餘屬性保存其圖片資源路徑；等到什麼時候的時機，再獲取這個自定義屬性值，再賦值給圖片的 src 屬性，此時，瀏覽器會根據這個 src 去加載圖片。
• 單張圖片懶加載 -當圖片即將進入瀏覽器可視窗口
  • 監聽頁面的滾動事件 當頁面滾動時 計算圖片何時進入可視窗口
  • 進入瀏覽器可視窗口條件 ：(圖片上外邊距離頁面頂端的距離 - 瀏覽器的可視窗口的高度 - 頁面縱向滾動條捲去的距離) <= 0
  • 現實項目中 先動態建立一個img標籤 用動態建立的 img 去嘗試加載，加載成功就再給頁面中的圖片 src 屬性賦值。
• 多張圖片懶加載
  • 監聽可視頁面全部圖片
  • 監聽頁面中的onscroll事件 在事件函數中 計算每張圖片是否即將出如今瀏覽器的可視窗口
  • 當前圖片即將進入，就進行該圖片的加載
  • 加載以前須要判斷該圖片是否有src屬性 如有 就說明圖片已經加載過 就不須要從新加載