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

getAttribute和setAttribute设置style的兼容问题

阅读更多

其实前面写过一篇“获取和设置目标元素的属性值”的,本文补充说明一下里面的兼容性问题:

 

先抛结论:

 

 

  • IE6-7在使用getAttribute或者setAttribute,不能直接操作样式

举例:

<div id="test" style="height:200px;width:100px;border:1px solid red;"></div>
 
var div = document.getElementById('test');
alert(div.getAttribute('style'));    //IE6-7返回的是一个style对象
 
所以我们在设计getAttr这样的获取元素属性值的时候,会预先判断key是否是style

if(key == 'style'){
    return element.style.cssText;
}
 

同样在调用setAttribute设置样式的时候也是一样:

if(key == 'style'){
    element.style.cssText = value;
}
 

分享到:
评论

相关推荐

    JS getAttribute和setAttribute(取得和设置属性)的使用介绍

    JavaScript中的getAttribute和setAttribute是DOM操作中的重要方法,它们分别用于获取和设置HTML元素的属性值。在Web开发中,通过这两个方法,开发者可以灵活地读取和修改HTML标签的属性,进而实现各种动态交互的效果...

    完美解决png在ie6兼容问题完整示例

    总的来说,解决PNG在IE6的兼容问题需要结合多种技术和策略,根据项目需求和目标用户的浏览器分布进行权衡和选择。随着IE6使用率的下降,现在的网页设计更多地转向了对现代浏览器的支持,但了解这些问题的历史和解决...

    javascript中setAttribute兼容性用法分析

    - 对于自定义属性,应使用`node.getAttribute("XXXX")`来获取和设置,这在所有浏览器中都是通用的。 2. **处理保留字和关键字**: - 当设置的属性名是JavaScript的关键字或保留字,如`class`,应使用驼峰命名法的...

    javascript兼容性解决方法大全

    通用的方法是使用`getAttribute`和`setAttribute`方法,如`div1.getAttribute("value")`和`div1.setAttribute("value", val)`。 综上所述,解决JavaScript的浏览器兼容性问题通常需要对各个浏览器的特性有深入理解...

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

    15. 元素属性:访问元素属性时,如`style.display`,需要考虑到IE和其他浏览器可能存在的差异,可能需要使用`getAttribute('style')`和`setAttribute('style', value)`。 16. `document.get`:在IE中,可以使用`...

    javascript DOM笔记 1

    例如,`getAttribute("class")`用于获取类名,`setAttribute("class", "myClass")`用于设置类名,而`removeAttribute("class")`则会移除该属性。 总结一下,JavaScript DOM提供了丰富的API来处理HTML文档结构。通过...

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

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

    JavaScript DOM高级程序设计

    5. **属性操作**:`getAttribute()`和`setAttribute()`用于读取和设置元素的属性值,而`classList`对象则提供了对类名操作的支持,如添加、移除和切换类。 6. **事件处理**:JavaScript DOM允许通过`...

    DOM编程基础.docx

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

    c#语言asp.net实现treeview控件读数据库动态生成树的代码

    如果遇到兼容性问题,例如在不同的浏览器中显示效果不一致,可以通过设置属性来解决: - **对于IE5.5**:可能需要调整某些样式属性。 - **对于IE6.0**:一般情况下可以直接使用,但如果出现问题,可以参照官方文档或...

    JS读写CSS样式的方法汇总

    JavaScript(JS)提供了多种方式来读写CSS样式,这些方法对于动态改变网页的外观和交互性至关重要。...需要注意的是,某些方法在不同浏览器中可能存在兼容性问题,使用时应确保进行适当的浏览器兼容性处理。

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

    然而,由于浏览器之间的差异,尤其是IE和Firefox(FF)之间的兼容性问题,正确使用`document.createElement()`需要注意一些细节。 在IE中,你可以直接在`document.createElement()`的参数中包含元素的所有属性,如...

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

    样式操作通常包括获取和设置行内样式以及获取元素的计算出的样式。 - IE支持background-position-x/y属性,而其他浏览器不支持。 - IE6/7/8不支持opacity属性,可以通过alpha滤镜来实现类似效果,但需要注意触发...

    一点学习ajax的笔记

    - 解决方案:同时使用`setAttribute("class", "newClassName")`和`setAttribute("className", "newClassName")`。 - 或者仅使用`&lt;element&gt;.className = "newClassName"`。 2. **IE浏览器中的`style`属性问题**: ...

    开发跨浏览器的JavaScript方法说明第1/2页

    要通过JavaScript设置元素样式,通常使用`setAttribute("style", "property: value;")`。但在IE中,应该使用`style.cssText`属性,例如`element.style.cssText = "color: red; font-weight: bold;"`。 编写跨...

    web基于浏览器的本地存储方法应用

    通过创建一个带有特殊样式的元素(如`&lt;div style="behavior: url(#default#userData)"&gt;`),然后使用`setAttribute`和`getAttribute`方法来设置和获取键值对数据。数据更改后,需调用`save`方法保存,初始化时则调用...

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

    JavaScript作为网页开发中不可或缺的技术之一,其在不同浏览器上的兼容性问题一直是前端开发人员必须面对的现实。尽管现代浏览器对ECMAScript标准的实现越来越一致,但仍有部分细节上的差异导致了编写跨浏览器的代码...

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

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

Global site tag (gtag.js) - Google Analytics