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);
				}
			}
			
		}
		
	
	}
})();

评论

1 楼 饶首建 2011-11-08  

楼主，后面的那个怎么测试？？？？