現(xiàn)在我們就來實(shí)現(xiàn)一個簡易版小插件，能夠在不借助jQuery的情況下實(shí)現(xiàn)CSS屬性的獲取和設(shè)置。

第一步

首先創(chuàng)建一個 css-tool.js 文件，一開始他是這個樣子的：

(function(window,undefined){ "use strict";  var cssTool = function(){    return new cssTool.PRototype.init();  }  cssTool.prototype = {    init: function(){      console.log('init success');      return this;    },  }  cssTool.prototype.init.prototype = cssTool.prototype;  // 暴露接口  window.cssTool = cssTool;})(window);
全局作用域可以看作是一棟公寓樓，我們創(chuàng)建一個立即執(zhí)行的匿名函數(shù)，相當(dāng)于是公寓樓中的一間公寓，我們在屋子里做的事情就都是隱秘的，也就是起到隔離作用域的作用，避免和外部變量產(chǎn)生沖突。把 window 作為參數(shù)拿到屋子里來，以后就不用再重復(fù)去外面找 window 來用。最前面的分號是為了保證在文件合并壓縮后產(chǎn)生語法錯誤。 undefined 在老版本瀏覽器中不被支持，因此考慮到兼容性添加一個形參。
我們創(chuàng)建了一個叫 cssTool 的私有方法，相當(dāng)于我們在屋子里找了一個小房間來放 get 和 set 等方法。接下來我們在原型上新增一個 init 方法，用于初始化。之后我們仿照 jQuery 的方式，將 init 的 prototype 指向 cssTool 的 prototype ，這樣我們在用 init 作為構(gòu)造函數(shù)創(chuàng)造實(shí)例時，可以使插件擁有兩種調(diào)用方式：
var ct = new cssTool() 構(gòu)建 cssTool 實(shí)例直接調(diào)用 cssTool() ，一樣返回 cssTool 實(shí)例
get方法
通用方式
現(xiàn)代瀏覽器和IE9+
window.getComputedStyle(elem,null).getPropertyValue(attr)
IE678
elem.currentStyle.getAttribute(camelCase(attr))
兼容處理
駝峰命名法轉(zhuǎn)換-camelCase
對 currentStyle 來說，在IE6瀏覽器中他很專一，只喜歡以駝峰命名法命名的變量，而IE78中就有點(diǎn)朝三暮四，駝峰命名法和中間帶’-‘的都照單全收，為了兼容和操作的簡便，我們統(tǒng)一轉(zhuǎn)換為駝峰命名法。
/** * 駝峰命名法轉(zhuǎn)換，IE678使用 * font-size --> fontSize * @param {String} attr * @param {String} match  匹配到的字符串，如-c * @param {String} originText (/w)是一個捕獲，這里是捕獲到的字符，如c * @return 返回駝峰命名方式的css屬性名 */functioncamelCase(attr){  return attr.replace(//-(/w)/g, function(match,originText){    return originText.toUpperCase();  });}
透明度獲取-getFilter
IE678的透明度是通過 filter:alpha(opacity=0) 來設(shè)置的，我們利用正則表達(dá)式匹配到此時透明度的值，由于此時得到的是0-100之間的數(shù)值，所以需要換算為我們常見的0-1的形式。
/** * IE678下獲取透明度的值 * @param  elem 獲取值的 dom * @return {Number} 透明度的值，默認(rèn)為1 * IE678下設(shè)置透明度 filter: alpha(opacity=0) 取值為0-100 */functiongetFilter(elem){  var _filter = elem.currentStyle.getAttribute('filter').match(/alpha/(opacity=(.*)/)/i);  var value = parseFloat(_filter[1]);  if(!isNaN(value)){    // 轉(zhuǎn)化為0-1    return value ? value/100 : 0;  }  return 1;}
float 值的獲取
上一篇博客中提到，由于 float 是 ECMAScript 的一個保留字。所以在各瀏覽器中都會有代替的寫法，比如說在現(xiàn)代瀏覽器中為 cssFloat ，而在 IE678 中為 styleFloat 。經(jīng)測試，在現(xiàn)代瀏覽器中直接使用 getPropertyValue("float") 也可以獲取到 float 的值。而 IE678 則不行，所以針對 float ，需要簡單的hack。
width | height 樣式的獲取
對于一個沒有設(shè)定高寬的元素而言，在 IE678 下直接獲取得到的值是 auto 。而現(xiàn)代瀏覽器會直接返回它的 px 值，我們的目標(biāo)就是在 IE 下也返回 px 值。
// 直接獲取外部樣式表未設(shè)置的 width 和 height 返回值為 auto// 為了獲取精確的 px 值，使用 getBoundingClientRect 方法// getBoundingClientRect 可以獲得元素四個點(diǎn)相對于文檔視圖左上角// 的 top、left、bottom、right值，進(jìn)行簡單計算即可var condition = attr === 'width'             || attr === 'height'             && elem.currentStyle[attr] === 'auto';if(condition){  var clientRect = elem.getBoundingClientRect();  return (attr === 'width' ?          clientRect.right - clientRect.left :          clientRect.bottom - clientRect.top         ) + 'px';}
set方法
set 方法相較于 get 方法要簡便的多，因?yàn)槲覀冇?cssText 這個跨越 IE6+ 和現(xiàn)代瀏覽器的神器。
通過 elem.style.cssText 可以對元素的樣式進(jìn)行讀寫，實(shí)際上操作的是 html 標(biāo)簽上的 style 屬性的值。因此不能直接對其賦值，不然就把整個 style 屬性的值給覆蓋掉了。我們采用累加的方式來修改屬性。
另外，在IE瀏覽器還有個小坑，如果 cssText 不為空，返回值最后一個分號會被刪掉，因此我們需要在累加的屬性前加上一個分號。
/** * 設(shè)置元素css樣式值 * @param elem 設(shè)置值的dom元素 * @param {String} attr 設(shè)置樣式名稱，如font-size * @param {String} value 設(shè)置樣式的值，如16px */set: function(elem, attr, value){  // IE78 設(shè)置透明度需特殊處理  if(attr === 'opacity'){    // 針對 IE7 的 hack    // filter 濾鏡要求 hasLFooout=true 才能執(zhí)行    // IE瀏覽器且 hasLFooout=false 時執(zhí)行    if(!!elem.currentStyle && !elem.currentStyle.hasLFooout){      elem.style.zoom = 1;      attr = 'filter';      value = 'alpha(opacity=' + value * 100 + ')';    }  }  // 通用方式  elem.style.cssText += ';' + (attr + ':' + value) + ';';}
補(bǔ)充
簡單解釋new操作符的作用
var Foo = function(){  return new Foo.prototype.init();}Foo.prototype = {  init: function(){    this.age = 18;    return this;  },  age: 20}console.log(Foo().age); // 18console.log(Foo.prototype.age); // 20
使用 new 操作符時，是把 init 當(dāng)成構(gòu)造函數(shù)來調(diào)用，在 init 內(nèi)部會創(chuàng)建一個隱式對象并用 this 指向它，此時的 this.age=18 表示在這個隱式對象上增加一個 age 屬性，最后 return this 不是必需的，構(gòu)造函數(shù)默認(rèn)會返回 this 。此時 Foo.prototype.age 不受影響。
當(dāng)不使用 new 操作符時，相當(dāng)于一個?普通對象上的函數(shù)調(diào)用， this 指向了 init 所屬的對象，即 Foo.prototype ， this.age=18 相當(dāng)于對 Foo.prototype.age 賦值，和使用 new 操作符是有本質(zhì)區(qū)別的。
小結(jié)
到這里，教程也就要告一段落了。一個 jQuery 中常見的 css() 方法背后涵蓋了非常多的知識點(diǎn)，跨瀏覽器的兼容性也是我們此次討論的重點(diǎn)，這次只是實(shí)現(xiàn)了一個非常簡易的 css 操作插件。學(xué)問尚淺，如果有不清楚或者有錯誤的地方，歡迎各位留言或者提issue來幫助我改進(jìn)這個小插件。