我们经常需要在JavaScript中给Element动态添加各种属性,可以使用setAttribute()来实现,但涉及到了浏览器的兼容性问题。
setAttribute(string name,string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:

element.setAttribute("class", vName);
element.setAttribute("className", vName); //for IE

2、onclick
bar.setAttribute("onclick", "");这里利用setAttribute指定onclick属性,简单很好理解。但是IE不支持。
为达到兼容各种浏览器的效果,可以用点符号来设置Element的对象属性、集合属性和事件属性。

document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick= function () { alert("This is a test!"); }

setAttribute()使用方法与IE兼容解决方法的更多相关文章

  1. IE6-7下margin-bottom不兼容解决方法(非原创,视频中看到的)

    在IE低版本下有很多不兼容,现在将看到的   IE6-7下margin-bottom不兼容解决方法   演示一下,方便日后自己查阅. <!DOCTYPE html> <html la ...

  2. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  3. ie6,ie7,ie8 css bug汇总以及兼容解决方法

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  4. 火狐min-height不兼容解决方法

    我们在进行页面架构的时候,一般会分成三个section:header.body.footer.如下面这个页面: 这个时候我们就需要对body部分进行最小高度设置,才能避免footer部分出现在页面中间 ...

  5. jquery-mobile的页面跳转和iscroll之间的兼容解决方法

    有一项目需要用到滚动效果,最后选择了iscroll插件,代码写好后chrome测试一切正常(直接查看用到滚动效果的页面以下统称当前页面),运行APP应用一步步跳转到当前页面的时候,滚动效果和滚动条等死 ...

  6. sql2000新建登陆用户错误“21002:[SQL-DMO] 用户***已经存在”的原因和解决方法【孤立用户解决方法】

    错误症状: 在SQL Server200中用附加数据库导入数据后,在新建登录时出现会出现错误21002:[SQL-DMO] 用户***已经存在.然后发现没建成的用户已经在登录列表里了.删除重建,问题依 ...

  7. sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法

    昨晚配置完成office web apps 2013的外部网络访问之后,今天发现了一个很奇怪的问题,就是IE 11不支持文档在线浏览,找了很多方法,打补丁什么的,都不管用,最后在预览文件的页面,看到& ...

  8. IScroll5+在ios、android点击(click)事件不兼容解决方法

    Bug描述: ios.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:click:true/false click的值是要根据移动终端设备进行判断 ...

  9. 【JavaScript兼容】关于IE8及以下无法通过getElementsByClassName()方法获得元素的解决方法

    try{ var a = document.getElementsByClassName("cla"); console.log(a); }catch(ex){ var array ...

随机推荐

  1. 创建CSS3警示框渐变动画

    来源:GBin1.com 在线演示   在线下载 现代的网页设计技术已经允许开发人员在大多数浏览器中快速实现所支持的动画,其中消息警示是非常普遍的.由于默认的JavaScript警示框往往设计不佳和过 ...

  2. C#计算时间间隔的方法小结

    初始化两个时间变量用于演示实例. DateTime dt1 = new DateTime(2013, 10, 13, 19, 15, 50); DateTime dt2 = new DateTime( ...

  3. Unity3d网络游戏Socket通讯

    http://blog.csdn.net/wu5101608/article/details/37999409

  4. Android实战技巧之三十八:Handler使用中可能引发的内存泄漏

    问题描写叙述 曾几何时,我们用原来的办法使用Handler时会有以下一段温馨的提示: This Handler class should be static or leaks might occur ...

  5. hibernate 关系映射之 双向外键关联一对一

    在上一篇博客内容的基础上做了以下修改,即可实现.   注解方式:   package com.bjsxt.hibernate; import javax.persistence.Entity; imp ...

  6. PHP拿到别人项目如何修改为自己

    以下为借助google翻译的,个人润色了一下,官方版里面感觉有很多问题,我这里有我个人修改大部分问题的版本,包括翻译完善,有需要的可以联系我:qyj8411@163.com 1. 在您网站的根目录创建 ...

  7. CentOS7关闭默认防火墙启用iptables防火墙

    CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭firewall: systemctl stop firewalld.service #停止f ...

  8. css3 使用animation实现动画效果

    .rotation { -webkit-animation-name: rotation; -webkit-animation-duration: 30s; -moz-animation-name: ...

  9. python selenium --unittest 框架

    转自:http://www.cnblogs.com/fnng/p/3300788.html 学习unittest 很好的一个切入点就是从selenium IDE 录制导出脚本.相信不少新手学习sele ...

  10. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...