特性是DOM構(gòu)建的一個(gè)組成部分，屬性是元素保持運(yùn)行時(shí)信息的主要手段。

12.1 DOM特性和DOM屬性

使用傳統(tǒng)的DOM方法getAttribute和setAttribute，或者使用DOM對象上與之對應(yīng)的屬性，都可以訪問到元素的特性值。

e.getAttribute('id');
e.id

設(shè)置特性的值，也會改變屬性的值。但屬性和特性并沒用使用同一個(gè)值。

使用class字符串可以獲取到class特性，但在IE中需要使用className。

for特性使用htmlFor屬性進(jìn)行表示，class屬性使用className屬性進(jìn)行表示。其他多單詞組成的特性名稱由駝峰式的屬性名稱表示。

在頁面元素上定義的自定義特性，不會自動(dòng)轉(zhuǎn)換為元素屬性的表示，需要使用DOM方法進(jìn)行訪問。

因?yàn)閷傩缘脑L問速度比相應(yīng)的DOM特性方法訪問速度要快，所以當(dāng)不確定一個(gè)特性的屬性是否存在時(shí)，可以先測試再訪問。

var value = ele.someValue ? ele.someValue : ele.getAttribute('someValue')

設(shè)置/獲取特性值的函數(shù)：

var translations = {
  "for": "htmlFor",
  "class": "className"
  /*其他多單詞特性名稱轉(zhuǎn)化*/
};

window.attr = function (ele, name, value) {
  var proName = translations[name] || name;
  var pro = ele[proName] !== undefined;
  if (value !== undefined) {
    if (pro) {
      ele[proName] = value;
    } else {
      ele.setAttribute(proName, value);
    }
  }
  if (pro) {
    return ele[proName].nodeName ? ele.getAttributeNode(proName).nodeValue : ele[proName];
  } else {
    return ele.getAttribute(proName);
  }
};

12.2 跨瀏覽器的attribute問題

input元素的id和name特性將作為form元素的屬性值進(jìn)行引用。產(chǎn)生的屬性會自動(dòng)覆蓋form元素上的已有的同名屬性。

<form id="testID" action="#">
  <input type="text" id="id">
  <input type="text" name="action">
</form>

console.log(test.id); // <input type="text" id="id">

可以通過獲取描述元素特性本身的原始DOM節(jié)點(diǎn)，然后獲取該節(jié)點(diǎn)的值解決這個(gè)問題。

ele.getAttributeNode(proName).nodeValue

在HTML文檔中，nodeName屬性返回的元素名稱都將是大寫的，使用前可轉(zhuǎn)為小寫。

ele.nodeName.toLowerCase();

12.3 樣式特性

元素的style對象屬性不會反應(yīng)從CSS樣式表中繼承的任何樣式信息。style屬性中的任何一個(gè)樣式的優(yōu)先級都要高于樣式表中所繼承的樣式。

多單詞的CSS樣式名稱作為屬性時(shí)，會轉(zhuǎn)換為駝峰式命名。利用正則表達(dá)式定義一個(gè)轉(zhuǎn)換方法：

function aboutStyle(ele, name, value) {
  // 獲取float屬性時(shí)，IE使用的是styleFloat屬性，其他瀏覽器使用的是cssFloat屬性。
  if (name === 'float') {
    name = ele.style['cssFloat'] ? 'cssFloat' : 'styleFloat';
  } else {
    name = name.replace(/-(a-z)/ig, function (all, letter) {
      return letter.toUpperCase();
    });
  }
  // 有些屬性的值為數(shù)字，不帶px之類的單位，以下為其中一部分
  var translations = {
    zIndex: 'zIndex',
    fontWeight: 'fontWeight',
    opacity: 'opacity',
    zoom: 'zoom',
    lineHeight: 'lineHeight'
  };
  
  if (!translations[name] && typeof value === 'number') {
    ele.style[name] = value + 'px';
    return ele.style[name]
  }
  
  if (value !== undefined) {
    ele.style[name] = value
  }
  return ele.style[name]
}

在非顯示元素上，只要嘗試獲取offsetWidth或offsetHeight屬性值，結(jié)果都是0。使用以下方法可以獲取隱藏元素的寬高。

(function () {
  var PROPERTIES = {
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
  };
  // 將元素的display設(shè)置為block，visibility設(shè)置為hidden，position設(shè)置為absolute，再獲取元素尺寸，完成后再還原。
  function getDimensions(ele) {
    var pre = {};
    for (var i in PROPERTIES) {
      pre[i] = ele.style[i];
      ele.style[i] = PROPERTIES[i];
    }
    var result = {
      width: ele.offsetWidth,
      height: ele.offsetHeight
    };
    for (var j in pre) {
      ele.style[j] = pre[j];
    }
    return result
  }

})();

獲取opacity的值時(shí)，支持opacity的瀏覽器會將其值規(guī)范為小于1.0且以0開頭的值，例如指定opacity值為.5，支持opacity的瀏覽器會將其規(guī)范為0.5。不支持的則返回原有形式.5。以此可以判斷瀏覽器是否支持opacity。
定義一個(gè)獲取opacity值的函數(shù)。

function getOpacity(ele) {
  var div = document.createElement('div');
  div.setAttribute('style', 'opacity: .5');
  var opacitySupported = div.style.opacity === '0.5';
  
  if (opacitySupported) {
    return ele.style.opacity || 1;
  } else {
    var opacity = ele.style.filter || 1;
    opacity = opacity.match(/alpha\(opacity=(\S*)\)/)[1];
    return parseFloat(opacity / 100);
  }
}`

12.4 獲取計(jì)算樣式

window.getComputedStyle()方法接收一個(gè)要進(jìn)行樣式計(jì)算的元素，并返回一個(gè)可以進(jìn)行屬性查詢的接口，返回的接口提供了一個(gè)名為getPropertyValue()的方法，用于檢索特定樣式屬性的計(jì)算樣式。getPropertyValue()的方法直接接收CSS屬性名稱，不需要駝峰式轉(zhuǎn)換。IE9之前的版本使用元素的currentStyle屬性獲取元素的實(shí)時(shí)計(jì)算樣式信息。定義一個(gè)獲取元素樣式的方法。

function fetchComputedStyle(ele, property) {
  if (window.getComputedStyle) {
    var computedStyle = window.getComputedStyle(ele);
    if (computedStyle) {
      property = property.replace(/([A-Z])/g, '-$1').toLowerCase();
      return computedStyle.getPropertyValue(property);
    }
  } else if (ele.currentStyle) {
    property = property.replace(/-(a-z)/ig, function (all, letter) {
      return letter.toUpperCase();
    });
    return ele.currentStyle[property];
  }
}

獲取屬性時(shí)，應(yīng)當(dāng)檢索的是底層的單個(gè)屬性，例如不能檢索border，而應(yīng)當(dāng)檢索border-top-color這樣的屬性。