1 CSS盒子模型

• 定義：CSS盒子模型：由四部分構(gòu)成：手動(dòng)設(shè)置的寬高+padding+border+margin

2 JS中的盒子模型

• 目的：通過(guò)元素身上提供的屬性和方法，來(lái)獲取元素身上的樣式慷妙；
• 分類(lèi)：client系列自脯、offset系列嫌套、scroll系列
• 注意：獲取的值都沒(méi)有單位蛆挫，只是數(shù)值琉朽；

2.1 client系列--可視區(qū)域

• 包括：clientWidth clientHeight clientLeft clientTop
  1. clientWidth:手動(dòng)設(shè)置的寬度+左右padding
  2. clientHeight:手動(dòng)設(shè)置的高度+上下padding
  3. clientLeft:左邊框的寬度淤袜；
  4. clientTop:上邊框的寬度痒谴；
• 瀏覽器頁(yè)面可視區(qū)域的寬高
  • 寬度：document.documentElement.clientWidth || document.body.clientWidth;
  • 高度：document.documentElement.clientHeight || document.body.clientHeight;

2.2 offset系列--偏移量

• 包括：offsetWidth offsetHeight offsetLeft offsetTop offsetParent
  1. offsetWidth: 手動(dòng)設(shè)置的寬度+左右padding+左右border;
  2. offsetHeight: 手動(dòng)設(shè)置的高度+上下padding+上下border;
  3. offsetLeft: 元素的左外邊框距離它父級(jí)的左內(nèi)邊框之間的距離；
  4. offsetTop: 元素的上外邊框距離它父級(jí)的上內(nèi)邊框之間的距離铡羡；
  5. offsetParent: 定位上的父級(jí)积蔚；查找到離它最近的添加定位元素的元素

2.3 scroll系列--卷簾

• 包括：scrollWidth scrollHeight scrollLeft scrollTop
  1. scrollWidth:
     • 內(nèi)容沒(méi)有溢出的情況下，等于自己設(shè)定的寬度+左右padding,跟clientWidth相等蓖墅；
     • 內(nèi)容溢出的情況下库倘，約等于自己設(shè)定的寬度+左padding，約等于是因?yàn)椴煌瑸g覽器獲得的值不同论矾；
  2. scrollHeight:
     • 內(nèi)容沒(méi)有溢出的情況下教翩，等于自己設(shè)定的高度+上下padding,跟clientHeight相等；
     • 內(nèi)容溢出的情況下贪壳，約等于自己設(shè)定的高度+上padding饱亿，約等于是因?yàn)椴煌瑸g覽器獲得的值不同；
  3. scrollLeft:指當(dāng)前頁(yè)面被瀏覽器卷去的寬度闰靴，有滾動(dòng)條時(shí)彪笼，滾動(dòng)卷去的寬度；
  4. scrollTop:指當(dāng)前頁(yè)面被瀏覽器卷去的高度蚂且，有滾動(dòng)條時(shí)配猫，滾動(dòng)卷去的高度；

2.4 JS盒子模型遇到的問(wèn)題

• JS盒子模型中求出來(lái)值都是四舍五入后的整數(shù)杏死，無(wú)法拿到小數(shù)——不解決泵肄；
• JS盒子模型中拿到的值都是復(fù)合值捆交，無(wú)法拿到元素身上單獨(dú)的寬或高屬性；——解決：封裝getCss
• 關(guān)于盒子模型的偏移量腐巢，只能求出當(dāng)前容器的外邊框到定位父級(jí)內(nèi)邊框之間的距離品追，無(wú)法求出當(dāng)前定位元素到body的距離；——解決：封裝offset
• 求可視區(qū)的寬高或被瀏覽器卷去的高度和寬度冯丙，代碼太長(zhǎng)肉瓦，太麻煩；——封裝win胃惜；

3 JS中常見(jiàn)的封裝思想

• 封裝的基本思想
  1. 屬性判斷：點(diǎn); 得到的結(jié)果是泞莉，有值或undefined，配合if判斷蛹疯，返回的是布爾值戒财；
     • 1. obj.xxx 如：if(window.getComputedStyle)->boolean;
     • 2. typeof obj.xxx=="function" 如：if(typeof window.getComputedStyle==="function");
  2. 屬性判斷：in; 得到的結(jié)果是布爾值，配合if判斷捺弦；
     • 代碼："屬性名" in 對(duì)象;如：if("getComputedStyle" in window)饮寞，返回布爾值
  3. 存在報(bào)錯(cuò)：用try...catch(e)...方法
  4. 正則判斷：獲取瀏覽器詳細(xì)信息str,判斷里面是否存在字符MSIE 6/7/8.0，利用正則查找返回相應(yīng)的值列吼；
     • 獲取瀏覽器的信息：var str=window.navigator.userAgent;
     • 判斷條件：MSIE 6/7/8.0;
     • 利用正則表達(dá)式來(lái)匹配多個(gè)滿(mǎn)足情況的字符串幽崩，正則表達(dá)式為：reg=/MSIE (6|7|8)\.0/gi;
       • 1. reg.test(str);返回布爾值
       • 2. str.search(reg)===-1;如果搜索到，則返回下標(biāo)值寞钥，如果未搜索到慌申，則返回-1；與indexOf方法相同理郑，只不過(guò)indexOf方法只能查找一種字符蹄溉，而正則可以查找多個(gè)；
  5. 總結(jié)：就是利用兩種方法來(lái)滿(mǎn)足不同瀏覽器存在的問(wèn)題您炉；
     • 利用if...else..方法來(lái)解決兩種不同情況下的選擇問(wèn)題柒爵，而條件就是布爾值；
       • 1）屬性判斷：實(shí)質(zhì)是判斷屬性是否存在赚爵；分為兩種棉胀，目的是獲取布爾值；適用于不同瀏覽器對(duì)同一屬性支持情況不同冀膝；
         • 第一種唁奢，利用屬性判斷，來(lái)獲取布爾值窝剖，其中點(diǎn)得到的結(jié)果是：有值或者undefined麻掸，添加if會(huì)被強(qiáng)制轉(zhuǎn)換為布爾值；
         • 第二種赐纱，利用in來(lái)判斷论笔，得到的結(jié)果就是布爾值采郎；
       • 2）正則表達(dá)式判斷：實(shí)質(zhì)是判斷瀏覽器種類(lèi)千所；分為兩種方法狂魔，目的是獲取布爾值；適用于不同瀏覽器對(duì)一個(gè)屬性支持淫痰，但是屬性在不同瀏覽器中的表現(xiàn)形式不同最楷，所以需要判斷瀏覽器種類(lèi)；
         • 獲取瀏覽器種類(lèi)的代碼：var str=window.navigator.userAgent待错，window可以省略籽孙；
         • indexOf方法，查找字符火俄，來(lái)判斷不同的瀏覽器犯建；缺點(diǎn)是：只能查找一個(gè)特定字符，不能查找一類(lèi)字符瓜客；
         • test()方法适瓦，利用正則表達(dá)式來(lái)查找一類(lèi)字符，返回值為布爾值谱仪；
         • search()方法玻熙，同樣利用正則表達(dá)式來(lái)搜索一類(lèi)字符，找到則返回下標(biāo)值疯攒，找不到則返回-1嗦随，所以判斷條件為str.search(reg)===-1，返回值也是布爾值敬尺；
     • 利用try...catch(e)..方法來(lái)解決枚尼，報(bào)錯(cuò)的問(wèn)題，只要報(bào)錯(cuò)就可以用此方法砂吞；當(dāng)不報(bào)錯(cuò)的情況下署恍，執(zhí)行try語(yǔ)句，報(bào)錯(cuò)的情況下呜舒，執(zhí)行catch語(yǔ)句锭汛；
• 實(shí)例：獲取元素身上的屬性的兩種方法解析
  • getComputedStyle()方法，是window的屬性袭蝗，屬性值為函數(shù)唤殴；
    • 代碼：getComputedStyle(oDiv,null).width,其中第一個(gè)參數(shù)為元素，第二個(gè)參數(shù)可以是任何值到腥，沒(méi)有含義朵逝，一般設(shè)置為null，width為元素身上的屬性乡范；
    • 兼容性：標(biāo)準(zhǔn)瀏覽器（包括IE9/10/11)支持配名；IE5/6/7/8瀏覽器不支持啤咽，會(huì)報(bào)錯(cuò)；
  • currentStyle屬性渠脉，是元素身上的屬性宇整；
    • 代碼：oDiv.currentStyle.width，其中oDiv為元素芋膘，width為元素身上的屬性鳞青；
    • 兼容性：IE瀏覽器（包括IE9/10/11)都支持；標(biāo)準(zhǔn)瀏覽器（Chrome）不支持为朋，會(huì)報(bào)錯(cuò)臂拓；
  • 總結(jié)：出現(xiàn)報(bào)錯(cuò)可以用try...catch(e)...方法，以上方法配合使用习寸；
    • 代碼：

     <script>
         //封裝兼容的方法獲取oDiv元素身上的width屬性
         //第一種方法：
         try{
             console.log(getComputedStyle(oDiv,null).width);
         }catch(e){
             console.log(oDiv.currentStyle.width);
         }
         //第二種方法：
         try{
             console.log(oDiv.currentStyle.width);
         }catch(e){
             console.log(getComputedStyle(oDiv,false).width);
         }
     </script>
    

4 getCss封裝

• 需求：獲取元素身上的屬性值
• 知識(shí)點(diǎn)：
  • 不同瀏覽器獲取屬性值的方法不同胶惰，封裝兼容的方法，使用if...else...或try...catch...方法霞溪；
  • 獲取的屬性值分為幾類(lèi)孵滞，1）數(shù)字加單位，如200px威鹿，屬性名為width剃斧；2）單詞，如solid忽你，屬性名為borderStyle幼东；3）二進(jìn)制顏色值，如#fff科雳，屬性名為backgroundColor;等
  • 獲取的屬性值不能是復(fù)合值根蟹，如background，padding糟秘，border等简逮；
  • 針對(duì)一些兼容性不同的屬性，如透明度尿赚，在標(biāo)準(zhǔn)瀏覽器中設(shè)置為opacity:0.1散庶，在IE6-8瀏覽器下設(shè)置為：filter:alpha(opacity=10)，所以在不同瀏覽器下獲取屬性名時(shí)會(huì)不同凌净；
• 思路：
  1. 基本封裝：標(biāo)準(zhǔn)瀏覽器下使用getComputedStyle()方法悲龟，IE6-8瀏覽器下使用currentStyle方法；
  2. 升級(jí)1：獲取數(shù)字加單位中的數(shù)字冰寻，需要去掉單位：有效數(shù)字的判斷+單位须教；其中單位可以是px,em,rem,pt等；
  3. 升級(jí)2：透明度兼容問(wèn)題斩芭，所以獲取屬性時(shí)會(huì)存在差異轻腺，需要針對(duì)不同的瀏覽器下進(jìn)行分別獲取乐疆，在標(biāo)準(zhǔn)瀏覽器下，直接獲取opacity屬性值贬养，在IE6-8瀏覽器下挤土，實(shí)際求filter的值，如果filter的值輸入正確煤蚌，返回對(duì)應(yīng)的數(shù)值耕挨，數(shù)值一定要除上100，如果透明度書(shū)寫(xiě)錯(cuò)誤尉桩，則透明度無(wú)法設(shè)置成功，返回默認(rèn)1贪庙；

   <script>
       var oDiv=document.getElementsByTagName("div")[0];
       function getCss(ele,attr){
           var value=null;
           //利用try...catch...方法來(lái)兼容不同瀏覽器
           /*try{
               value=getComputedStyle(ele,null)[attr];
           }catch(e){
               value=ele.currentStyle[attr];
           }*/
           if(window.getComputedStyle){
               //在標(biāo)準(zhǔn)瀏覽器（包括IE9,10）下蜘犁，window.getComputedStyle屬性值為一個(gè)函數(shù)，強(qiáng)制轉(zhuǎn)換為布爾值為true
               value=getComputedStyle(ele,null)[attr];
           }else{
               //在IE6,7,8瀏覽器下止邮，不支持getComputedStyle屬性这橙，會(huì)返回undefined，轉(zhuǎn)換為布爾值為false导披；
               //添加對(duì)透明的判斷
               if(attr=="opacity"){
                   //還要判斷透明度代碼是否書(shū)寫(xiě)正確屈扎，書(shū)寫(xiě)錯(cuò)誤設(shè)置不成功，返回1撩匕；
                   var reg1=/^alpha\(opacity=(\d+)\)$/;//此時(shí)絕對(duì)不能加全局g鹰晨，否則test和exec會(huì)對(duì)lastIndex值進(jìn)行重復(fù)影響；
                   value=ele.currentStyle.filter;
                   return reg1.test(value) ? reg1.exec(value)[1]/100 : 1;
                   //如果reg1添加全局g止毕，會(huì)出現(xiàn)問(wèn)題模蜡，可以通過(guò)RegExp.$1來(lái)獲取小分組的內(nèi)容
                   //代碼：return reg1.test(value)? RegExp.$1/100 : 1;
               }
               value=ele.currentStyle[attr];
           }
           //升級(jí)1 將獲取的屬性值為200px格式的值，去掉單位扁凛，只輸出數(shù)字忍疾，其他類(lèi)型的不變
           //判斷條件為：有效數(shù)字，如+-200.343px;
           var reg=/^(([+-]?(\d|([1-9]\d+)))(\.\d+)?)(px|em|rem|pt)$/;
           return reg.test(value) ? parseFloat(value) : value;
           //升級(jí)2 針對(duì)不同瀏覽器兼容不同谨朝，如透明度的設(shè)置卤妒，在不同瀏覽器下設(shè)置的代碼不同，想要獲取其中的數(shù)值
           //思路：在標(biāo)準(zhǔn)瀏覽器下獲取屬性名opacity字币，在IE6-8瀏覽器下则披，獲取屬性名filter,在利用正則獲取其中的數(shù)值，需要除上100纬朝；
       }
       console.log(getCss(oDiv,"height"));//屬性名要加雙引號(hào)收叶；
       console.log(getCss(oDiv,"borderStyle"));//結(jié)果為solid;
       console.log(getCss(oDiv,"opacity"));//結(jié)果為0.5;
   </script>