IE6/7中不能通过setAttribute设置元素的style属性,也不能通过getAttribute获取元素的style属性值。它获取的是一个style对象。
如下
<div style="color:blue">div test</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName('div')[0];
// 获取style属性值
var val = div1.getAttribute('style');
alert(val);
</script>
IE8/9/Firefox/Safari/Chrome/Opera : 弹出“color:blue”
IE6/7 :则是“[object]”,为一个style对象。
又如
<div style="color:blue">div test</div>
<script type="text/javascript">
var div1 = document.getElementsByTagName('div')[0];
// 设置的style
div1.setAttribute('style', 'color:red');
</script>
IE8/9/Firefox/Safari/Chrome/Opera :div文字的颜色为红色
IE6/7 :没有改变,仍然是蓝色
鉴于此,方法setAttr/getAttr要增加对style的处理,如下
/**
*
* DOM util
* Version: 0.1
* Author: snandy
* Blog: http://snandy.cnblogs.com
*
* 1, 普通属性直接name
* 2, IE6/7中特殊属性如class, for等转义
* 3, IE6/7中style属性使用cssText
*
*/
dom = (function() {
var fixAttr = {
tabindex: 'tabIndex',
readonly: 'readOnly',
'for': 'htmlFor',
'class': 'className',
maxlength: 'maxLength',
cellspacing: 'cellSpacing',
cellpadding: 'cellPadding',
rowspan: 'rowSpan',
colspan: 'colSpan',
usemap: 'useMap',
valign: 'vAlign',
frameborder: 'frameBorder',
contenteditable: 'contentEditable'
},
p,
div = document.createElement( 'div' );
div.innerHTML = '<p style="color:red;"></p>';
div.setAttribute('class', 't');
p = div.getElementsByTagName('p')[0];
var
// http://www.cnblogs.com/snandy/archive/2011/08/27/2155300.html
setAttr = div.className === 't',
// http://www.cnblogs.com/snandy/archive/2011/03/11/1980545.html
cssText = /;/.test(p.style.cssText);
var special = {
style : {
get: function( el ) {
var txt = el.style.cssText;
if(txt) {
txt = cssText ? txt : txt + ';';
return txt.toLowerCase();
}
},
set: function( el, value ) {
return (el.style.cssText = '' + value);
}
}
};
return {
support : {
setAttr : setAttr,
cssText : cssText
},
setAttr : function(el, name, val) {
if(setAttr) {
el.setAttribute(name, val);
return val;
}else {
if(special[name]) {
return special[name].set(el, val);
}else {
el.setAttribute(fixAttr[name] || name, val);
return val;
}
}
},
getAttr : function(el, name) {
if(setAttr) {
return el.getAttribute(name);
}else {
if(special[name]) {
return special[name].get(el);
}else {
return el.getAttribute(fixAttr[name] || name);
}
}
}
}
})();