1.element要用getElementById 或者是ByTagName来得到

2.setAttribute("class", vName)中class是指改变"class"这个属性,所以要带引号。

3.IE中要把class改成className,.....IE不认class,所以最好写两句,都用上吧。

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、setAttribute()的差异
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,
而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和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的浏览器兼容性的更多相关文章

  1. setAttribute的浏览器兼容性(转)

    1.element要用getElementById or ByTagName来得到, 2.setAttribute("class", vName)中class是指改变"c ...

  2. jQuery1.11源码分析(3)-----Sizzle源码中的浏览器兼容性检测和处理[原创]

    上一章讲了正则表达式,这一章继续我们的前菜,浏览器兼容性处理. 先介绍一个简单的沙盒测试函数. /** * Support testing using an element * @param {Fun ...

  3. 浏览器兼容性随手记:Javascript

    1.event IE9以下不支持直接获取event对象,所以需要写兼容: var event = event?event:window.event; IE8以下不支持event.target,但是可以 ...

  4. JAVASCRIPT 浏览器兼容性问题及解决方案列表

    JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...

  5. 网页页面NULL值对浏览器兼容性的影响

    网页页面NULL值对浏览器兼容性的影响       近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...

  6. 浏览器兼容性-JS篇

    总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...

  7. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS 多浏览器兼容性问题及解决方案

    兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...

  9. 浏览器兼容性之Css篇

    本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...

随机推荐

  1. Win7+MSVC2010+PCL1.7.2

    我的配置环境是Win7+MSVC2010+PCL1.7.2. 网上关于点云库配置的文章已经很多,这里不做过多的重复,这里只讲一下自己在配置过程中遇到的问题及一些注意事项. K1: 在用Cmake编译时 ...

  2. window下搭建Vue.Js开发环境

    一.安装node.js.https://nodejs.org/en/download/ 最新包会自动安装npm 二.安装完node之后,npm包含的很多依赖包是部署在国外的,在天朝,大家都知道下载速度 ...

  3. Vert.x,一个异步、可伸缩、并发应用框架引发的思考

    2012年听说过Vert.x这个框架之后,去年大致了解了下,最近开始进一步熟悉这个框架. Vert.x是一个用于下一代异步.可伸缩.并发应用的框架,旨在为JVM提供一个Node.js的替代方案.开发者 ...

  4. smarty课程---最最最简单的smarty例子

    smarty课程---最最最简单的smarty例子 一.总结 一句话总结:其实所有的模板引擎的工作原理是差不多的,无非就是在php程序里面用正则匹配将模板里面的标签替换为php代码从而将两者混合为一个 ...

  5. Markdown编辑器为什么好用以及好用的markdown编辑器

    Markdown编辑器为什么好用以及好用的markdown编辑器 一.总结 一句话总结:Markdown 是一种简单的.轻量级的标记语法.用户可以使用诸如 * # 等简单的标记符号以最小的输入代价生成 ...

  6. 79.QT解决迷宫问题(面向过程与面向对象)

    面向过程: 创建一个类继承dialog,mydialog,添加两个变量 #ifndef MYDIALOG_H #define MYDIALOG_H #include <QDialog>&g ...

  7. HDU 2689 Tree

    Tree Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. PHP 获取完整URL地址

    /** * 获取当前完整URL * @return string */ function get_url() { $sys_protocal = isset($_SERVER['SERVER_PORT ...

  9. iOS 基于第三方QQ授权登录

    基于iOS实现APP的第三方QQ登陆.接入第三方SDK时的一个主要的步骤: 1,找到相关的开放平台.QQ互联平台,http://connect.qq.com/: 2,注冊成功后创建自己的APP.填写一 ...

  10. 深入理解javascript之原型

    理解原型 原型是一个对象.其它对象能够通过它实现属性继承. 不论什么一个对象都能够成为继承,全部对象在默认的情况下都有一个原型.由于原型本身也是对象,所以每一个原型自身又有一个原型. 不论什么一个对象 ...