我们经常需要在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. LAMP动态网站实例

    Zend Optimizer: 用优化代码的方法来提高PHP应用程序的执行速度.实现的原理是对那些在被最终执行之前由运行编译器(Run-Time Compiler)产生的代码进行优化.一般情况下,执行 ...

  2. chrome浏览器 提示Adobe Flash Player未安装的解决方法

    最近遇到了个flash player设置的一个问题,记录一下,可能不同浏览器版本和设置不一样 浏览器版本:版本 61.0.3163.100(正式版本) (64 位) 打开需要flash player的 ...

  3. ffmpeg相关资源

    FFPLAY的原理(一) http://blog.csdn.net/shenbin1430/article/details/4291893 ubuntu12.04下命令安装ffplay等: sudo ...

  4. java类与对象_成员变量和局部变量区别

    成员变量和局部变量:1.成员变量:再类中定义,用来描述对象将要有什么.2.局部变量:在类的方法中定义,在方法中临时保存数据.区别:1.作用域不同:  局部:仅限于定义它的方法  成员:整个类中都是可见 ...

  5. vue 不能检测数组长度 值变化原因解析

    1.vue不能检测数组长度或者值的变化 (1)数组长度变化 未检测到 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. javascript 将内容复制到剪贴板

      javascript 将内容复制到剪贴板 CreateTime--2017年9月19日11:36:50 Author:Marydon js 操作剪贴板 1.设置剪贴板内容 UpdateTime-- ...

  7. nutch中bin/crawl和bin/nutch crawl的用法(转)

    针对上一篇文章中出现的问题:Command crawl is deprecated, please use bin/crawl instead错误信息,今天在官网上查阅了一下,进行了总结. 官网lin ...

  8. hibernate的配置, 增删改查

    路径:查找路径 实际上都是查找编译后的对应的路径,在bin文件夹中总 增删改必须开启事务才行 hibernate加载文件的两种方式 configure 1.引包 antlr-2.7.6.jar bac ...

  9. Python 统计代码的行数,Python脚本 统计代码

    # coding=utf-8 import os import time # 需要统计的文件夹或者文件,这是在windows下运行的,如果使用Linux系统可以使用 basedir = '/app/l ...

  10. Web檢測

    腾讯电脑管家http://guanjia.qq.com/online_server/webindex.html 安全联盟http://zhanzhang.anquan.org/physical/my_ ...