JavaScript特性（attribute）、属性（property）和样式（style）

最近在研读一本巨著《JavaScript忍者秘籍》，里面有一篇文章提到了这3个概念。

书中的源码可以在此下载。我将源码放到了线上，如果不想下载，可以直接访问在线网址，修改页面名就能访问到相应示例代码。

一、DOM特性和DOM属性

attribute（特性），是我们赋予某个事物的特质或对象，attribute是HTML标签上的特性，它的值只能够是字符串

property（属性），是早已存在的不需要外界赋予的特质，property是DOM中的属性，是JavaScript里的对象

在访问元素特性值时有两种方式：

1. 传统DOM方法getAttribute和setAttribute。

2. 使用DOM对象上与之对应的属性。

例如通过两种方式获取id的值：

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

1）跨浏览器命名

特性和属性命名之间的差异会更多。

在大多数浏览器中可以用class获取到class特性，但IE却要使用className。

2）命名限制

特性表示为传递给DOM方法的字符串，其命名规范是非常自由的。

而属性名称，由于可以作为标识符使用点表示法进行访问，所以其命名规范更受限制。

3）HTML和XML之间的差异

在处理一个XML DOM的时候，不会在元素上自动创建属性值来表示特性值。

因此，我们需要使用传统的DOM特性方法获取特性的值。

elem.ownerDocument只读属性会返回当前节点的顶层的 document 对象。

function isXML(elem) {
　　return (elem.ownerDocument || elem.documentElement).nodeName.toLowerCase() !== 'html';
}

4）自定义特性的行为

要想访问自定义特性值，需要使用DOM方法getAttribute()与setAttribute()。

在HTML5中，对所有的自定义特性使用“data-”前缀。

5）性能注意事项

总的来说，属性的访问速度比相应DOM特性方法的访问速度要快，特别是在IE浏览器中。

下面做个测试，分别用两种方式读取和设置500W次。可以在不同浏览器中点开这个地址来查看测试结构。

下面的截图是在Chrome中的结果：

二、跨浏览器的Attribute问题

1）DOM中的id/name膨胀

5大浏览器都会将表单input元素的id和name特性作为<form>元素的属性值进行引用。

产生的这些属性，会主动覆盖form元素上已经存在的同名属性。

此外，IE浏览器不仅会替换属性值，甚至还会替换该属性值上的特性值。

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

var form = document.getElementById('testForm');
assert(form.id === 'testForm', "the id property is untouched");
assert(form.action === '/', "the action property is untouched");
assert(form.getAttribute('id') === 'testForm',  "the id attribute is untouched");
assert(form.getAttribute('action') === '/', "the action attribute is untouched");

在所有的现代浏览器中，由于这些input定义的id和name的值，表单的id和action属性都会被input元素的引用所替代。

解决方法是获取描述元素特性本身的原始DOM节点，该节点没有被浏览器修改：

var action = element.getAttributeNode('action').nodeValue;

2）URL规范化

在访问一个引用了URL属性时（例如src、href或action），该URL值会自动将原始值转换成完整规范的URL。

<a href="listing-11.5.html" id="testSubject">Self</a>

var link = document.getElementById('testSubject');
var linkHref = link.getAttributeNode('href').nodeValue; //#1

assert(linkHref === 'listing-11.5.html',  'link node value is ok');
assert(link.href === 'listing-11.5.html',  'link property value is ok');
assert(link.getAttribute('href') == linkHref, 'link attribute not modified');

3）style特性

HTML DOM元素有一个style属性，通过该属性我们能获取元素的样式信息，例如element.style.color。

<span style="color:red"></span>

如果要获取“color:red”字符串，那么style属性没用，得用getAttribute('style')方法获取。

但IE中得用element.style.cssText获取。

4）节点名称

在HTML文档中，nodeName属性返回的名称将是大写（例如HTML、BODY）。

在XML或XHTML文档中，nodeName返回的名称是用户指定的名称，可以大写、小写或混合。

三、令人头疼的样式特性

1）样式在何处

<style>
      div { font-size: 1.8em; border: 0 solid gold; }
</style>
<div style="color:#000;" title="Ninja power!">
      忍者
</div>

var div = document.getElementsByTagName("div")[0];

assert(div.style.color == 'rgb(0, 0, 0)' ||  div.style.color == '#000','color was recorded');

assert(div.style.fontSize == '1.8em', 'fontSize was recorded');
assert(div.style.borderWidth == '0', 'borderWidth was recorded');
div.style.borderWidth = "4px";                    //#6
assert(div.style.borderWidth == '4px', 'borderWidth was replaced');

1. 大多数颜色都会转换成RGB颜色符号，有一些会转换为颜色的名称。

2. font-size和border都被记录在了style标签内，样式是继承获取的，但div.style属性中没有获取到。

3. 一个元素的style属性中的任何一个样式的优先级都要高于样式表所继承的样式（即便使用了“!important”注解规则）。

2）样式属性命名

CSS特性将多余一个单词的用连字符分隔，例如font-size、font-weight等。

在JS中可以用带有连字符的样式名称，但不能使用点运算符来访问样式了。

var size = element.style['font-size'];//允许
var size = element.style.font-size;//不允许
var size = element.style.fontSize;//允许

在JS中多个单词的CSS样式名称用驼峰的方式命名，例如fontSize、fontWeight。

具体的CSS样式表对应属性可以参考《CSS Properties Reference》

3）设置多个样式属性

不能通过直接给style属性设置字符串（如：elt.style = "color: blue;"）来设置style，因为style应被当成是只读的。

设置多个属性可以用cssText或setAttribute，其中cssText会将重复属性覆盖屌。

elt.style.cssText = "color: blue"; // 设置多个样式属性 当带前缀的时候-webkit-transform:rotate(0deg)，会过滤掉-webkit，只能用下面的方式
elt.setAttribute("style", "color: blue"); // 设置多个样式属性 

4）float样式属性

float是JS中的保留关键字，浏览器需要提供另外一个替代名称。

大部分浏览器使用cssFloat，但IE使用styleFloat。

5）像素值的转换过程

为style属性设置数字时，必须要指定单位，以便在所有的浏览器上都能使用。

element.style.height = '10px';//安全
element.style.height = 10;//不安全

6）测量元素的高度和宽度

offsetHeight和offsetWidth可以获取元素的高度和宽度，不过这两个属性值包括了padding值，更多元素尺寸属性可以参考《JavaScript中尺寸、坐标》

但如果元素隐藏（例如display:none），获取到的数值都是0。对于隐藏元素可以用如下的方法：

可以查看在线demo实例：

“Pole”是显示的图片，就是那个忍者。

而“Shuriken”是隐藏的图片，一开始是获取不到宽度的，在使用了上面的技巧后就能获取到了。

7）通过opacity看透明度

所有现代浏览器，包括IE9支持opacity属性，但IE9之前的版本需要使用专用的alpha过滤法。

opacity: .5;
filter: alpha(opacity=50)

支持opacity的浏览器，总会将值规范为小于1.0且以0开头的值。

例如“opacity:.5”，那么支持的将返回“0.5”，不支持的将返回“.5”。

通过特性仿真，可以判断浏览器是否支持opacity。

//特性仿真检测
var div = document.createElement("div");                 //#1
div. setAttribute('style','opacity:.5');
var OPACITY_SUPPORTED = div.style.opacity === "0.5";

assert(OPACITY_SUPPORTED,   "Opacity is supported.");

8）颜色属性

通过不同的计算样式方法访问这些颜色值的时候，各种浏览器的返回值几乎都不一致。

下面是一个在线demo，在不同浏览器中展示的颜色值：

IE8	Firefox	Chrome
IE8不支持RGBA和HSL格式	Firefox不仅保留了颜色名称， 而且标准颜色是RGB和RGBA格式	Webkit浏览器(Chrome、Safari) 标准颜色是RGB和RGBA格式

四、获取计算样式

1）window.getComputedStyle()与element.currentStyle

一个元素的计算样式（computed style）都是应用在该元素上的所有样式组合。

这些样式包括样式表、元素的style特性，以及脚本对style属性的各种操作。

现代浏览器（包括IE9）的实现方法为：window.getComputedStyle()，返回接口提供了一个getPropertyValue()的方法。

IE9之前的版本，通过附加到所有元素上的currentStyle属性，表现和style属性一样。

/**
* property可以传入驼峰或分隔符方式
*/
function fetchComputedStyle(element, property) { //#3
  //现代浏览器 包括IE9
  if (window.getComputedStyle) {
    var computedStyles = window.getComputedStyle(element); //#4
    if (computedStyles) { //#5
      property = property.replace(/([A-Z])/g, '-$1').toLowerCase();
      return computedStyles.getPropertyValue(property);//getPropertyValue中需要传入分隔符字符串，例如font-size
    }
  } else if (element.currentStyle) { //IE9以下
    property = property.replace(
      /-([a-z])/ig,
      function(all, letter) {
        return letter.toUpperCase();
      });
    return element.currentStyle[property];
  }
}