IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值
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); } } } } })();