~~~ //=>clientTop/Left/Width/Height //1.clientWidth & clientHeight：獲取當前元素可視區域的寬高（內容的寬高+左右/上下PADDING） //=>和內容是否有溢出無關（和是否設置了OVERFLOW:HIDDEN也無關），就是我們自己設定的內容的寬高+PADDING //=>獲取當前頁面一屏幕(可視區域)的寬度和高度 // document.documentElement.clientWidth || document.body.clientWidth （內容寬+padding），和內容溢出沒有關系，可以得到一屏幕的寬高 // document.documentElement.clientHeight || document.body.clientHeight //2.clientTop & clientLeft：獲取(上/左)邊框-border的寬度 //3.offsetWidth & offsetHeight：在client的基礎上加上border（和內容是否溢出也沒有關系） 內容寬+padding+border //4、scrollWidth & scrollHeight：真實內容的寬高（不一定是自己設定的值，因為可能會存在內容溢出， // 有內容溢出的情況下，需要把溢出的內容也算上）+ 左/上PADDING，而且是一個約等于的值 （沒有內容溢出和CLIENT一樣）可以得到整個的寬高 //=>在不同瀏覽器中，或者是否設置了OVERFLOW:HIDDEN都會對最后的結果產生影響，所以這個值僅僅做參考，屬于約等于的值 //=>獲取當前頁面的真實寬高（包含溢出的部分） // document.documentElement.scrollWidth || document.body.scrollWidth // document.documentElement.scrollHeight || document.body.scrollHeight //============================= //=>通過JS盒模型屬性獲取值的特點 //1.獲取的都是數字不帶單位 //2.獲取的都是整數，不會出現小數（一般都會四舍五入，尤其是獲取的 偏移量） //3.獲取的結果都是復合樣式值（好幾個元素的樣式組合在一起的值），如果只想獲取單一樣式值（例如：只想獲取PADDING）， // 我們的盒子模型屬性就操作不了了（這不能說沒有用，真實項目中，有時候我們就是需要獲取組合的值來完成一些操作） //===========[獲取元素具體的某個樣式值] //1.[元素].style.xxx 操作獲取 //> 只能獲取所有寫在元素行內上的樣式(不寫在行內上,不管你寫沒寫都獲取不到,真實項目中我們很少會把樣式寫在行內上) //=>outer.style.width =>'' (width是寫在樣式表中的) //2.獲取當前元素所有經過瀏覽器計算的樣式 //> 經過計算的樣式：只要當前元素可以在頁面中呈現（或者瀏覽器渲染它了），那么它的樣式都是被計算過的 //=>不管當前樣式寫在哪 //=>不管你是否寫了(瀏覽器會給元素設置一些默認樣式) /* * 標準瀏覽器(IE9+) * window.getComputedStyle([元素],[偽類,一般都寫null]) 獲取到當前元素所有被瀏覽器計算過的樣式(對象) * * IE6~8 * [元素].currentStyle 獲取經過計算的樣式 */ /* * getCss：獲取當前元素某一個樣式屬性值 * * @param * curEle[object]：當前要操作的元素 * attr[string]：當前要獲取的樣式屬性名 * * @return * 獲取的樣式屬性值 */ let getCss = function getCss(curEle, attr) { if ('getComputedStyle' in window) { let val = window.getComputedStyle(curEle, null)[attr]; //=>把獲取的結果去除單位（不是所有的值都能去單位的，例如：display\一些復合值都去不掉單位）， // 只有符合 數字+單位 這種模式的結果才能基于PARSE-FLOAT去單位 let reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i; reg.test(val) ? val = parseFloat(val) : null; return val; } //=>throw new SyntaxError：拋出一個錯誤(語法錯誤),讓瀏覽器崩潰,不在繼續執行JS throw new SyntaxError('您的瀏覽器版本過低，請升級到最新版本，謝謝配合！！'); }; console.log(getCss(outer, 'width')); ~~~