在上篇据说每个大牛、小牛都应该有自己的库——DOM处理最后剩下attr()和css()方法没有处理，因为这两个方法当时并不自计划中，是写着写着突然想到的，一时间没有特别好的思路，当时已十一点多了，就去睡了。没想到啊没想到接下来的一星期简直是噩梦，每天加班回家都十一点，今天有时间赶紧补上。
property与attribute
之前说了这两个方法是仿照jQuery的，看了一下jQuery的源码，发现从1.6后jQuery多了一个prop()方法，做的功能却和attr()很相似，看了很多资料才明白prop是在解决什么问题。
property和attribute都可以翻译为属性，不过为了区别一般把property翻译为特性，而在JavaScript中，property和attribute的区别不止这么简单。setAttribute是为DOM节点设置/添加属性的标准方法，我们一般会这么用
var e = document.getElementById('ck');
e.setAttribute('title', 'test');
也可以这么用
var e = document.getElementById('ck');
e.title = 'test';
无论怎么设，在读取的时候这么用
alert(e.getAttribute('title'));
alert(e.title);
对attribute设定/读取值使用setAttribute/getAttribute，property使用.操作符，两种用法看似毫无区别，但是我们也经常设置元素的class，想要得到预期结果得这么写
e.setAttribute('class', 'test');
e.className = 'test';
同样都是对class操作，使用attribute的key是class，property却是className，其读取的结果也不一定相同(input 的checkbox)
console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //true
DOM对象大部分的内置property都有对应的名字的attribute（名字也可能不同，比如上面的class），对于自定义的属性双发互不干扰（IE9以下版本还是共享的）
e.setAttribute('customizeProperty', 'attribute');
e.customizeProperty = 'property';
console.log(e.getAttribute('customizeProperty')); //attribute
console.log(e.customizeProperty); //property
看起来似乎很清楚了，看个例子
<input id="ck" type="checkbox" checked="checked" />
<script type="text/javascript">
var e = document.getElementById('ck'); console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //true e.checked = false;
console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //false e.setAttribute('checked', 'checked');
console.log(e.getAttribute('checked')); //checked
console.log(e.checked); //false </script>
这是怎么个情况，不是内置属性是共享的吗，怎么互不干扰了？这是因为一些Boolean类型的属性(如checked, selected, disabled等)比较特殊，其attribute只保留初始值(默认值), property才是当前最新的状态值。一个默认勾选的checkbox，当在页面去除勾选的时候，checked这个property已由true变为false，而checked这个attribute仍然保持“checked”这个初始值。
attr()
这都和attr()有神马关系，说上面的原因是既然了解了property和attribute的不同，那么自己的库干脆也像jQuery把property和attribute分开处理。自己写了很多，总是有这样那样的问题，看到了大神John Resig的处理方法后，豁然开朗，这两个方法是可以写成结合体的，无耻的简单改造了一下抄过来，注释写的都这么经典没舍得删
attr: function (elem, name, value) {
// Are we setting a value?
if (typeof name == 'object') {
for (n in name) {
attr(elem, n, name[n]);
}
}
else if (value !== undefined) {
// Make sure the element has the ability to set an attribute
if (typeof elem.setAttribute !== "undefined") {
// If the user is setting the value to false
if (value === false) {
// Completely remove the attribute
elem.removeAttribute(name);
// Otherwise set the attribute value
} else {
// If the user is setting the value to true,
// Set it equal to the name of the attribute
// (handles boolean attributes nicely)
elem.setAttribute(name, value === true ? name : value);
}
// If it doesn't, then we're likely dealing with window or document
// (or some other object entirely)
} else {
elem[name] = value;
}
// Otherwise we're getting an attribute value
// Check to see if the appropriate method exists
// Also don't use getAttribute if a boolean property exists
} else if (typeof elem.getAttribute !== "undefined" && typeof elem[name] !== "boolean") {
return elem.getAttribute(name);
// If no getAttribute method is present, or if we
// wish to access the boolean property instead of the
// attribute, then we fallback to the DOM object property
} else {
return elem[name];
}
}
css()
css()方法就写不了jQuery那么强大了，基本没有做错误处理，所以使用的时候必须保证传入的属性名称和值是正确的，同时只能传入简单的属性名，而不能是-moz-等类似的
css:function(ele,name,value){
if(typeof name=='object'){
for(n in name){
ssLib.css(ele,n,name[n]);
}
}else if(typeof value!='undefined'){
ele.style[_parseStyleName(name)]=value;
}else{
return ele.style[_parseStyleName(name)];
}
}
参考
http://ejohn.org/blog/jquery-16-and-attr/（大神John Resig的博客）