8、洞悉特性、属性和样式

特性是DOM构建的一个组成部分，属性是元素保持运行时信息的主要手段。

12.1 DOM特性和DOM属性

使用传统的DOM方法getAttribute和setAttribute，或者使用DOM对象上与之对应的属性，都可以访问到元素的特性值。

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

设置特性的值，也会改变属性的值。但属性和特性并没用使用同一个值。

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

for特性使用htmlFor属性进行表示，class属性使用className属性进行表示。其他多单词组成的特性名称由驼峰式的属性名称表示。

在页面元素上定义的自定义特性，不会自动转换为元素属性的表示，需要使用DOM方法进行访问。

因为属性的访问速度比相应的DOM特性方法访问速度要快，所以当不确定一个特性的属性是否存在时，可以先测试再访问。

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

设置/获取特性值的函数：

var translations = {
  "for": "htmlFor",
  "class": "className"
  /*其他多单词特性名称转化*/
};

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元素的属性值进行引用。产生的属性会自动覆盖form元素上的已有的同名属性。

  
  


console.log(test.id); // 

可以通过获取描述元素特性本身的原始DOM节点，然后获取该节点的值解决这个问题。

ele.getAttributeNode(proName).nodeValue

在HTML文档中，nodeName属性返回的元素名称都将是大写的，使用前可转为小写。

ele.nodeName.toLowerCase();

12.3 样式特性

元素的style对象属性不会反应从CSS样式表中继承的任何样式信息。style属性中的任何一个样式的优先级都要高于样式表中所继承的样式。

多单词的CSS样式名称作为属性时，会转换为驼峰式命名。利用正则表达式定义一个转换方法：

function aboutStyle(ele, name, value) {
  // 获取float属性时，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();
    });
  }
  // 有些属性的值为数字，不带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属性值，结果都是0。使用以下方法可以获取隐藏元素的宽高。

(function () {
  var PROPERTIES = {
    position: 'absolute',
    visibility: 'hidden',
    display: 'block'
  };
  // 将元素的display设置为block，visibility设置为hidden，position设置为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的值时，支持opacity的浏览器会将其值规范为小于1.0且以0开头的值，例如指定opacity值为.5，支持opacity的浏览器会将其规范为0.5。不支持的则返回原有形式.5。以此可以判断浏览器是否支持opacity。
定义一个获取opacity值的函数。

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 获取计算样式

window.getComputedStyle()方法接收一个要进行样式计算的元素，并返回一个可以进行属性查询的接口，返回的接口提供了一个名为getPropertyValue()的方法，用于检索特定样式属性的计算样式。getPropertyValue()的方法直接接收CSS属性名称，不需要驼峰式转换。IE9之前的版本使用元素的currentStyle属性获取元素的实时计算样式信息。定义一个获取元素样式的方法。

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];
  }
}

获取属性时，应当检索的是底层的单个属性，例如不能检索border，而应当检索border-top-color这样的属性。