IE6/7不支持setAttribute设置style / 不支持getAttribute获取style属性值
IE6/7中不能通过setAttribute设置元素的style属性,也不能通过getAttribute获取元素的style属性值。它获取的是一个style对象。
如下
1 2 3 4 5 6 7 8 | < 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对象。
又如
1 2 3 4 5 6 7 | < 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的处理,如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | /** * * 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); } } } } })(); |
分类:
兼容性
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战