我们经常需要在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. jQuery li click失效问题

    转自:http://blog.sina.com.cn/s/blog_64008ed70101nyoz.html 项目中使用到jQuery脚本插入一段代码,然后给代码加事件,但是click事件失效,网上 ...

  2. 云计算之路-试用Azure-飞流直下三千尺:实测虚拟机磁盘IO

    Azure的Temporary Storage(临时存储)磁盘的IO速度曾经是个传说,只知道它很快,但不知道究竟有多快.而Azure中国的情况怎么样,我们来实测一下. 测试环境:Azure上海机房,1 ...

  3. rails引入bootstrap

    1.在Gemfile中增加 gem 'bootstrap-sass', '~> 3.2.0.2'2.bundle install3.把assets/stylesheets/application ...

  4. 网页图表控件Highcharts选项配置参数

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  5. html5:article与section元素

    article元素         aiticle元素代表文档.页面或应用程序中独立的.完整的.可以肚子被外部引用的内容.它可以使一片博客或报刊中的文章.帖子.         一个article元素 ...

  6. 关于vector push_back()与其他方式读取数据的效率对比(转)

    引言: 在读取大量数据(数组)时,使用vector会尽量保证不会炸空间(MLE),但是相比于scanf的读取方式会慢上不少.但到底效率相差有多大,我们将通过对比测试得到结果. 测试数据:利用srand ...

  7. php抽象类和接口的异同【转】

    1. 相同点: (1)      两者都是抽象类,都不能实例化. (2)      interface 实现类及 abstract class 的子类都必须要实现已经声明的抽象方法. 2. 不同点: ...

  8. 11-spring学习-表达式语言

    1,表达式语言的操作形式以及处理流程. 2,在spring中各种表达式字符串的编写. SPEL(spring Express language) 表达式入门 观察一下表达式: 范例:表达式操作 1)基 ...

  9. hibernate 一对多双向

    package com.bjsxt.hibernate; import java.util.HashSet; import java.util.Set; import javax.persistenc ...

  10. springboot服务器部署方式

    1.利用maven打包 maven project --> clean --> install 2.云服务器上启动 nohup java -jar /xxx/xxx/xxx.jar > ...