摘要：而現(xiàn)代瀏覽器會(huì)直接返回它的值，我們的目標(biāo)就是在下也返回值。通過(guò)可以對(duì)元素的樣式進(jìn)行讀寫(xiě)，實(shí)際上操作的是標(biāo)簽上的屬性的值。因此不能直接對(duì)其賦值，不然就把整個(gè)屬性的值給覆蓋掉了。我們采用累加的方式來(lái)修改屬性。

上一篇博文介紹了getComputedStyle方法，接下來(lái)，我們就來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的小插件，能夠在不借助jQuery的情況下實(shí)現(xiàn)css屬性的獲取和設(shè)置。

作者：Icarus
原文鏈接：手把手帶你用原生js實(shí)現(xiàn)css屬性的set和get

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

;(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)建一個(gè)立即執(zhí)行的匿名函數(shù)，相當(dāng)于是公寓樓中的一間公寓，我們?cè)谖葑永镒龅氖虑榫投际请[秘的，也就是起到隔離作用域的作用，避免和外部變量產(chǎn)生沖突。把 window 作為參數(shù)拿到屋子里來(lái)，以后就不用再重復(fù)去外面找 window 來(lái)用。最前面的分號(hào)是為了保證在文件合并壓縮后產(chǎn)生語(yǔ)法錯(cuò)誤。 undefined 在老版本瀏覽器中不被支持，因此考慮到兼容性添加一個(gè)形參。

我們創(chuàng)建了一個(gè)叫 cssTool 的私有方法，相當(dāng)于我們?cè)谖葑永镎伊艘粋€(gè)小房間來(lái)放 get 和 set 等方法。接下來(lái)我們?cè)谠蜕闲略鲆粋€(gè) init 方法，用于初始化。之后我們仿照 jQuery 的方式，將init的 prototype 指向 cssTool 的 prototype ，這樣我們?cè)谟?b>init作為構(gòu)造函數(shù)創(chuàng)造實(shí)例時(shí)，可以使插件擁有兩種調(diào)用方式：

var ct = new cssTool()構(gòu)建 cssTool 實(shí)例

直接調(diào)用cssTool()，一樣返回 cssTool 實(shí)例

window.getComputedStyle(elem,null).getPropertyValue(attr)

elem.currentStyle.getAttribute(camelCase(attr))

對(duì) currentStyle 來(lái)說(shuō)，在IE6瀏覽器中他很專(zhuān)一，只喜歡以駝峰命名法命名的變量，而IE78中就有點(diǎn)朝三暮四，駝峰命名法和中間帶"-"的都照單全收，為了兼容和操作的簡(jiǎn)便，我們統(tǒng)一轉(zhuǎn)換為駝峰命名法。

/**
 * 駝峰命名法轉(zhuǎn)換，IE678使用
 * font-size --> fontSize
 * @param {String} attr
 * @param {String} match  匹配到的字符串，如-c
 * @param {String} originText (w)是一個(gè)捕獲，這里是捕獲到的字符，如c
 * @return 返回駝峰命名方式的css屬性名
 */
function camelCase (attr){
  return attr.replace(/-(w)/g, function (match,originText) {
    return originText.toUpperCase();
  });
}

IE678的透明度是通過(guò) filter:alpha(opacity=0) 來(lái)設(shè)置的，我們利用正則表達(dá)式匹配到此時(shí)透明度的值，由于此時(shí)得到的是0-100之間的數(shù)值，所以需要換算為我們常見(jiàn)的0-1的形式。

/**
 * IE678下獲取透明度的值
 * @param  elem 獲取值的 dom
 * @return {Number} 透明度的值，默認(rèn)為1
 * IE678下設(shè)置透明度 filter: alpha(opacity=0) 取值為0-100
 */
function getFilter(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 是 ECMAScript 的一個(gè)保留字。所以在各瀏覽器中都會(huì)有代替的寫(xiě)法，比如說(shuō)在現(xiàn)代瀏覽器中為 cssFloat，而在 IE678 中為 styleFloat 。經(jīng)測(cè)試，在現(xiàn)代瀏覽器中直接使用 getPropertyValue("float") 也可以獲取到 float 的值。而 IE678 則不行，所以針對(duì) float ，需要簡(jiǎn)單的hack。

對(duì)于一個(gè)沒(méi)有設(shè)定高寬的元素而言，在 IE678 下直接獲取得到的值是 auto 。而現(xiàn)代瀏覽器會(huì)直接返回它的 px 值，我們的目標(biāo)就是在 IE 下也返回 px 值。

// 直接獲取外部樣式表未設(shè)置的 width 和 height 返回值為 auto
// 為了獲取精確的 px 值，使用 getBoundingClientRect 方法
// getBoundingClientRect 可以獲得元素四個(gè)點(diǎn)相對(duì)于文檔視圖左上角
// 的 top、left、bottom、right值，進(jìn)行簡(jiǎn)單計(jì)算即可
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 方法相較于 get 方法要簡(jiǎn)便的多，因?yàn)槲覀冇?cssText 這個(gè)跨越 IE6+ 和現(xiàn)代瀏覽器的神器。
通過(guò)elem.style.cssText可以對(duì)元素的樣式進(jìn)行讀寫(xiě)，實(shí)際上操作的是 html 標(biāo)簽上的 style 屬性的值。因此不能直接對(duì)其賦值，不然就把整個(gè) style 屬性的值給覆蓋掉了。我們采用累加的方式來(lái)修改屬性。
另外，在IE瀏覽器還有個(gè)小坑，如果 cssText 不為空，返回值最后一個(gè)分號(hào)會(huì)被刪掉，因此我們需要在累加的屬性前加上一個(gè)分號(hào)。

/**
 * 設(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"){
    // 針對(duì) IE7 的 hack
    // filter 濾鏡要求 hasLFooout=true 才能執(zhí)行
    // IE瀏覽器且 hasLFooout=false 時(shí)執(zhí)行
    if(!!elem.currentStyle && !elem.currentStyle.hasLFooout){
      elem.style.zoom = 1;
      attr = "filter";
      value = "alpha(opacity=" + value * 100 + ")";
    }
  }
  // 通用方式
  elem.style.cssText += ";" + (attr + ":" + value) + ";";
}

var Foo = function() {
  return new Foo.prototype.init();
}

Foo.prototype = {
  init: function() {
    this.age = 18;
    return this;
  },
  age: 20
}

console.log(Foo().age); // 18
console.log(Foo.prototype.age); // 20

var Foo = function() {
  return Foo.prototype.init();
}

Foo.prototype = {
  init: function() {
    this.age = 18;
    return this;
  },
  age: 20
}

console.log(Foo().age); // 18
console.log(Foo.prototype.age); // 18

使用 new 操作符時(shí)，是把 init 當(dāng)成構(gòu)造函數(shù)來(lái)調(diào)用，在 init 內(nèi)部會(huì)創(chuàng)建一個(gè)隱式對(duì)象并用 this 指向它，此時(shí)的 this.age=18 表示在這個(gè)隱式對(duì)象上增加一個(gè) age 屬性，最后 return this 不是必需的，構(gòu)造函數(shù)默認(rèn)會(huì)返回 this。此時(shí)Foo.prototype.age不受影響。
當(dāng)不使用 new 操作符時(shí)，相當(dāng)于一個(gè)?普通對(duì)象上的函數(shù)調(diào)用，this 指向了 init 所屬的對(duì)象，即 Foo.prototype，this.age=18相當(dāng)于對(duì) Foo.prototype.age 賦值，和使用 new 操作符是有本質(zhì)區(qū)別的。

到這里，教程也就要告一段落了。一個(gè) jQuery 中常見(jiàn)的 css() 方法背后涵蓋了非常多的知識(shí)點(diǎn)，跨瀏覽器的兼容性也是我們此次討論的重點(diǎn)，這次只是實(shí)現(xiàn)了一個(gè)非常簡(jiǎn)易的 css 操作插件。學(xué)問(wèn)尚淺，如果有不清楚或者有錯(cuò)誤的地方，歡迎各位留言或者提issue來(lái)幫助我改進(jìn)這個(gè)小插件。
最后，完整的項(xiàng)目地址：https://github.com/xdlrt/css-...
求一波star~