利用原生JavaScript擷取樣式的方式小結，javascript小結

利用原生JavaScript擷取樣式的方式小結，javascript小結

來源：http://www.ido321.com/930.html

ps：是擷取樣式，不是設定樣式。若沒有給元素設定樣式值，則返回瀏覽器給予的預設值。（論壇整理）

 

1、element.style:只能擷取寫在元素標籤中的style屬性裡的樣式值，無法擷取到定義在<style></style>和通過<link href=”css.css”>載入進來的樣式屬性

   1: var ele = document.getElementById('ele');

   2: ele.style.color;    //擷取顏色

 

2、window.getComputedStyle():可以擷取當前元素所有最終使用的CSS屬性值。

   1: window.getComputedStyle("元素", "偽類");

這個方法接受兩個參數：要取得計算樣式的元素和一個虛擬元素字串（例如“:before”） 。如果不需要虛擬元素資訊，第二個參數可以是null。也可以通過document.defaultView.getComputedStyle(“元素”, “偽類”);來使用

   1: var ele = document.getElementById('ele');

   2: var styles = window.getComputedStyle(ele,null);

   3: styles.color;  //擷取顏色

可以通過style.length來查看瀏覽器預設樣式的個數。IE6-8不支援該方法，需要使用後面的方法。對於Firefox和Safari，會把色彩轉換成rgb格式。

 

3、element.currentStyle:IE 專用，返回的是元素當前應用的最終CSS屬性值（包括外鏈CSS檔案，頁面中嵌入的<style>屬性等）。

   1: var ele = document.getElementById('ele');

   2: var styles = ele.currentStyle;

   3: styles.color;

注意：對於綜合屬性border等，ie返回undefined，其他瀏覽器有的返回值，有的不返回，但是borderLeftWidth這樣的屬性是返回值的

 

4、getPropertyValue()：擷取CSS樣式的直接屬性名稱

   1: var ele = document.getElementById('ele');

   2: window.getComputedStyle(ele,null).getPropertyValue('color');

注意：屬性名稱不支援駝峰格式，IE6-8不支援該方法，需要使用下面的方法

 

5、getAttribute()：與getPropertyValue類似，有一點的差異是屬性名稱駝峰格式

   1: var test = document.getElementById('test');

   2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

  注意：該方法只支援IE6-8。

 

下面的擷取樣式方法相容IE、chrome、FireFox等

   1: function getStyle(ele) {

   2:     var style = null;

   3:     

   4:     if(window.getComputedStyle) {

   5:         style = window.getComputedStyle(ele, null);

   6:     }else{

   7:         style = ele.currentStyle;

   8:     }

   9:     

  10:     return style;

  11: }

在JQuery中，常用css()擷取樣式屬性，其底層運作就應用了getComputedStyle以及getPropertyValue方法。

原生javascript中，新產生的元素怎綁定事件

window.onload = function () { var oBtn = document.getElementById("btn1"); var oUl = document.getElementById("ul1"); var aA = oUl.getElementsByTagName("a"); oBtn.onclick = function () { var oLi = document.createElement("li"); oLi.innerHTML = '11111111111<a href="javascript:;">刪除</a>'; oUl.appendChild(oLi); // 在這裡給新的a添加事件 aA = oLi.getElementsByTagName("a"); for (var i = 0; i < aA.length; i++) { aA[i].onclick = function () { oUl.removeChild(this.parentNode); } } } for (var i = 0; i < aA.length; i++) { aA[i].onclick = function () { oUl.removeChild(this.parentNode); } }}
 
javascript原生代碼貌似很強大!!頂起

= =|| 原生代碼是不差~看情況使用了，有時候用庫比較方便，有時候原生代碼更好用
用庫用到一段時間，最好開始研究下庫的代碼~知其所以然，就不容易忘了