`
zhouyrt
  • 浏览: 1159183 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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);
				}
			}
			
		}
		
	
	}
})();
2
3
分享到:
评论
1 楼 饶首建 2011-11-08  
楼主,后面的那个怎么测试????

相关推荐

    总结js中的一些兼容性易错的问题

    - IE6/7不支持getElementsByClassName和querySelectorAll这两个函数。从IE8开始支持,因此在IE6/7环境下,实际可用的只有getElementByTagName。 - IE6/7不支持getElementsByTagName('*')会返回非元素节点。要么不用'...

    javaScript中DOM模型使用详解+XMLHttpRequest异步请求使用

    一旦找到目标元素,就可以通过`getAttribute`来获取属性值,通过`setAttribute`来修改属性,或者通过`style`对象来改变元素的样式。例如,下面的代码展示了如何获取和设置`&lt;div id="div1"&gt;`的属性和样式: ```...

    javascript 对象属性property与元素属性attribute的浏览器支持

    - 较旧的浏览器(如IE6/7)可能不支持ES6及以后的特性,如`let`、`const`、箭头函数等。 - **元素属性**: - **所有现代浏览器**都支持HTML元素属性。 - HTML5新增的元素属性(如`data-*`)可能在旧版浏览器中不...

    浏览器兼容页面开发注意事项(javascript篇)_101028参考.pdf

    9. FF中自定义属性:Firefox要求通过`getAttribute()`获取自定义属性值,而IE则可以直接访问。使用`getAttribute`可确保兼容性。 10. FF中没有`parentElement`和`parement.children`:Firefox使用`parentNode`和`...

    jacascript DOM节点——元素节点、属性节点、文本节点

    需要注意的是,`hasAttribute()`在IE6和IE7中可能不支持,且对于某些属性(如`class`和`for`),在不同浏览器中可能存在差异。`getAttribute(attr)`用于获取属性的值,而`setAttribute(attr, value)`用来设置属性的...

    DOM编程基础.docx

    3. **属性操作**:`element.getAttribute('attr')`获取元素的属性值,`element.setAttribute('attr', 'value')`设置属性值,`element.removeAttribute('attr')`移除属性。 4. **事件处理**:DOM提供了事件处理机制...

    IE与Firefox在JavaScript上的7个不同写法小结

    JavaScript通过element.style.property只能访问到通过JavaScript或者在元素的style属性中直接设置的样式。若要访问样式表中定义的“计算样式”(即最终应用到元素上的样式值),在IE和Firefox中的处理方式不同。 IE...

    javascript 操作 dom 的常用方法

    11. `setAttribute` 和 `getAttribute` 方法:`setAttribute`用来设置元素的属性值,如`element.setAttribute("class", "myClass")`;而`getAttribute`用于获取属性的值,如`var className = element.getAttribute(...

    JS控制图片翻转示例代码(兼容firefox,ie,chrome)

    在JavaScript中,实现图片翻转功能可以跨浏览器地应用于Firefox、Internet Explorer(包括版本6、7、8)以及Chrome等主流浏览器。以下是一个简单的示例代码,详细解释了如何使用JS控制图片翻转: 首先,我们需要一...

    document.createElement()用法及注意事项(ff下不兼容)

    `element`对象的方法如`getAttribute(id)`用于获取元素的指定属性值,`setAttribute(id, value)`用于设置元素的属性值。在编写跨浏览器的JavaScript代码时,理解这些方法的行为差异至关重要,以确保代码的稳定性和...

    HTMLDOM.rar_DOM_MSHTML

    3. **创建和修改节点**:`createElement`创建新元素,`appendChild`和`insertBefore`插入元素,`removeChild`删除元素,`setAttribute`和`getAttribute`设置或获取属性值。 4. **事件处理**:通过`addEventListener`...

    107个常用Javascript语句

    - **功能**:获取或设置指定ID的元素的属性值。 - **应用场景**:动态修改页面元素的属性。 - **示例代码**: ```javascript var element = document.getElementById("myElement"); console.log(element....

    一点学习ajax的笔记

    - **`&lt;element&gt;.getAttribute(name)`**:获取元素的某个属性值。 - **`&lt;element&gt;.setAttribute(name, value)`**:设置元素的某个属性值。 - **`&lt;element&gt;.insertBefore(node1, node2)`**:将一个节点插入到另一个...

    AJAX开发简略 DOM文档对象中文手册

    4. **属性和样式**:通过DOM,我们可以获取和设置元素的属性值,如`element.getAttribute()`和`element.setAttribute()`;也可以修改CSS样式,如`element.style.property`。 5. **遍历和搜索**:DOM提供了遍历和查找...

    学习JS中的DOM节点以及操作

    - **getAttribute**:获取元素的属性值。 - **setAttribute**:设置元素的属性值。在旧版IE中可能存在兼容性问题,可使用点号`.`来代替,如`element.classname = 'class1'`。 5. **修改CSS样式**: - **...

    Javascript DOM编程艺术(中文版)

    - **属性节点**:存储元素的属性值。 - **文本节点**:存储文本信息。 - **注释节点**:存储注释信息。 - **文档节点**:表示整个文档的根节点。 #### 二、DOM操作技术 **2.1 获取DOM元素** 在JavaScript中,有...

    个人总结前端基础面试题

    **兼容性**:IE6不支持。 - **相邻兄弟选择器**:如`h1 + p {}`,选择紧跟在`h1`后面的`p`元素。**兼容性**:IE6不支持。 - **属性选择器**:如`*[title] { color: red; }`选择所有具有`title`属性的元素,或更具体...

Global site tag (gtag.js) - Google Analytics