我们经常需要在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. Gstreamer学习

    Gstreamer学习笔记----Gstreamer架构设计思想 http://blog.csdn.net/tx3344/article/details/7497434 Gstreamer到底是个啥? ...

  2. 代码可读性艺术在Andorid中的体现

    前言 最近接手的一些项目,不同的人编码风格迥异,类里的变量.方法的定义穿插,注释极为稀少,更有一些变量和方法的命名非常近似,例如表示播放队列的"playQueue"和表示歌单的&q ...

  3. 算法笔记_083:蓝桥杯练习 合并石子(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 在一条直线上有n堆石子,每堆有一定的数量,每次可以将两堆相邻的石子合并,合并后放在两堆的中间位置,合并的费用为两堆石子的总数.求把所有石子 ...

  4. ant design pro 初识

    发送请求 上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面. 先完整的过一遍请求吧 首先view层发送请求例如下面的代码: componentDidMount( ...

  5. VUE v-bind绑定class和style

    1.绑定class (1)对象语法 <!DOCTYPE html> <html lang="zh"> <head> <meta chars ...

  6. [物理题+枚举] hdu 4445 Crazy Tank

    题意: 给你N个炮弹的发射速度,以及炮台高度H和L1,R1,L2,R2. 问任选发射角度.最多能有几个炮弹在不打入L2~R2的情况下打入L1~R1 注意:区间有可能重叠. 思路: 物理题,发现单纯的依 ...

  7. 【Linux命令】ls命令

    ls命令是Linux最常用的命令,ls命令就是list的缩写,主要作用是:打印出当前目录的清单.如果ls指定其他目录,那么就会显示指定目录下的清单. 1.命令格式 ls [选项] [目录名] 2.命令 ...

  8. Linux su命令参数及用法详解--Linux切换用户命令

    建议大家切换用户的时候 使用  su -  root  这样,否则可能发现某些命令执行不了 关于su .su - 及 sudo的区别 请往下看 1.命令作用 su的作用是变更为其它使用者的身份,超级用 ...

  9. win7保护眼睛的颜色设置方法(85,125,205)

    win7保护眼睛的颜色设置方法(85,125,205) 在电脑桌面空白处点击右键“个性化”按钮. 在弹出的对话框单击“窗口颜色”. 在弹出的新的对话框中单击“高级外观设置”. 在弹出的窗口颜色和外观中 ...

  10. rsync工具介绍

    rsync工具介绍 http://man.linuxde.net/rsync rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件.rsync使用所谓的“rsync算法” ...