手把手帶你用原生js實現css屬性的set和get

首先建立乙個css-tool.js檔案，一開始他是這個樣子的：

;(function (window,undefined) 
csstool.prototype = ,
} csstool.prototype.init.prototype = csstool.prototype;
// 暴露介面
window.csstool = csstool;
})(window);複製**

全域性作用域可以看作是一棟公寓樓，我們建立乙個立即執行的匿名函式，相當於是公寓樓中的一間公寓，我們在屋子裡做的事情就都是隱秘的，也就是起到隔離作用域的作用，避免和外部變數產生衝突。把window作為引數拿到屋子裡來，以後就不用再重複去外面找window來用。最前面的分號是為了保證在檔案合併壓縮後不產生語法錯誤。undefined在老版本瀏覽器中不被支援，因此考慮到相容性新增乙個形參。

我們建立了乙個叫csstool的私有方法，相當於我們在屋子裡找了乙個小房間來放get和set等方法。接下來我們在原型上新增乙個init方法，用於初始化。之後我們仿照jquery的方式，將init的prototype指向csstool的prototype，這樣我們在用init作為建構函式創造例項時，可以使外掛程式擁有兩種呼叫方式：

window.getcomputedstyle(elem,null).getpropertyvalue(attr)複製**

elem.currentstyle.getattribute(camelcase(attr))複製**

對currentstyle來說，在ie6瀏覽器中他很專一，只喜歡以駝峰命名法命名的變數，而ie78中就有點朝三暮四，駝峰命名法和中間帶'-'的都照單全收，為了相容和操作的簡便，我們統一轉換為駝峰命名法。

/**
* 駝峰命名法轉換，ie678使用
* font-size --> fontsize
* @param attr
* @param match 匹配到的字串，如-c
* @param origintext (\w)是乙個捕獲，這裡是捕獲到的字元，如c
* @return 返回駝峰命名方式的css屬性名
*/function
camelcase (attr));
}複製**

ie678的透明度是通過filter:alpha(opacity=0)來設定的，我們利用正規表示式匹配到此時透明度的值，由於此時得到的是0-100之間的數值，所以需要換算為我們常見的0-1的形式。

/**
* ie678下獲取透明度的值
* @param elem 獲取值的 dom
* @return 透明度的值，預設為1
* ie678下設定透明度 filter: alpha(opacity=0) 取值為0-100
*/function
getfilter(elem) 
return
1;}複製**

對於乙個沒有設定高寬的元素而言，在 ie678 下直接獲取得到的值是auto。而現代瀏覽器會直接返回它的 px 值，我們的目標就是在 ie 下也返回 px 值。

// 直接獲取外部樣式表未設定的 width 和 height 返回值為 auto
// 為了獲取精確的 px 值，使用 getboundingclientrect 方法
// getboundingclientrect 可以獲得元素四個點相對於文件檢視左上角
// 的 top、left、bottom、right值，進行簡單計算即可
var condition = attr === 'width'
|| attr === 'height'
&& elem.currentstyle[attr] === 'auto';
if(condition)複製**

set 方法相較於 get 方法要簡便的多，因為我們有csstext這個跨越 ie6+ 和現代瀏覽器的神器。

通過elem.style.csstext可以對元素的樣式進行讀寫，實際上操作的是 html 標籤上的style屬性的值。因此不能直接對其賦值，不然就把整個style屬性的值給覆蓋掉了。我們採用累加的方式來修改屬性。

另外，在ie瀏覽器還有個小坑，如果 csstext 不為空，返回值最後乙個分號會被刪掉，因此我們需要在累加的屬性前加上乙個分號。

/**
* 設定元素css樣式值
* @param elem 設定值的dom元素
* @param attr 設定樣式名稱，如font-size
* @param value 設定樣式的值，如16px
*/set: function (elem, attr, value)
} // 通用方式
elem.style.csstext += ';' + (attr + ':' + value) + ';';
}複製**

var foo = function() 
foo.prototype = ,
age: 20
}console.log(foo().age); // 18
console.log(foo.prototype.age); // 20
複製**

var foo = function() 
foo.prototype = ,
age: 20
}console.log(foo().age); // 18
console.log(foo.prototype.age); // 18
複製**

使用 new 操作符時，是把init當成建構函式來呼叫，在init內部會建立乙個隱式物件並用this指向它，此時的this.age=18表示在這個隱式物件上增加乙個 age 屬性，最後return this不是必需的，建構函式缺省會返回this。此時foo.prototype.age不受影響。

當不使用 new 操作符時，相當於乙個普通物件上的函式呼叫，this指向了init所屬的物件，即foo.prototype，this.age=18相當於對foo.prototype.age賦值，和使用 new 操作符是有本質區別的。

求一波star~

手把手帶你用原生js實現css屬性的set和get

Django 手把手帶你入門

手把手帶你構建SpringBoot專案

Windows服務手把手帶你體驗

手把手帶你用原生js實現css屬性的set和get

Django 手把手帶你入門

手把手帶你構建SpringBoot專案

Windows服務 手把手帶你體驗

相關推薦

Windows服務手把手帶你體驗