setAttribute的浏览器兼容性
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的浏览器兼容性的更多相关文章
- setAttribute的浏览器兼容性(转)
1.element要用getElementById or ByTagName来得到, 2.setAttribute("class", vName)中class是指改变"c ...
- jQuery1.11源码分析(3)-----Sizzle源码中的浏览器兼容性检测和处理[原创]
上一章讲了正则表达式,这一章继续我们的前菜,浏览器兼容性处理. 先介绍一个简单的沙盒测试函数. /** * Support testing using an element * @param {Fun ...
- 浏览器兼容性随手记:Javascript
1.event IE9以下不支持直接获取event对象,所以需要写兼容: var event = event?event:window.event; IE8以下不支持event.target,但是可以 ...
- JAVASCRIPT 浏览器兼容性问题及解决方案列表
JAVASCRIPT 浏览器兼容性问题及解决方案列表(1)获取HTML元素只兼容IE:document.all.hello hello 兼容所有: document.getElementById(“h ...
- 网页页面NULL值对浏览器兼容性的影响
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
- 浏览器兼容性-JS篇
总结一下平时遇到的浏览器兼容性问题,本篇关于JS. 1.事件绑定 兼容写法: function add(obj,event){ if (obj.addEventListener) { obj.addE ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- 浏览器兼容性之Css篇
本文与上一篇随笔<浏览器兼容性之Javascript篇>有一定关联,下来我会继续不断总结,旨在解决浏览器兼容性,对遇到类似问题的同仁有所帮助,如有更多解决浏览器兼容性的案例还望大家分享一起 ...
随机推荐
- JAVA使用Gson解析json数据,实例
封装类Attribute: public class Attribute { private int id; private String name; private int age; public ...
- @Mapper注解在springboot中无法注入
问题① @Mapper注解报红无法注入 方法 在pom文件中添加依赖
- Flask--Python中常用的Web框架之一
Web框架 什么是框架? 协助开发者快速开发web应程序的一套功能代码 开发者只需要按照框架约定要求,在指定位置写上自己的业务逻辑代码即可 为什么要用web框架? 使用web框架的主要目的就是避免重复 ...
- 洛谷 P1913 L国的战斗之伞兵
P1913 L国的战斗之伞兵 题目背景 L国即将与I国发动战争!! 题目描述 为了在敌国渗透作战,指挥官决定:派出伞兵前往敌国!然而敌国的风十分强烈,能让伞兵在同一高度不停转悠,直到被刮到一个无风区… ...
- LeetCode102 Binary Tree Level Order Traversal Java
题目: Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to ri ...
- 45. Express 框架 静态文件处理
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 提供了内置的中间件 express.static 来设置静态 ...
- 浏览器加载渲染HTML、DOM、CSS、 JAVASCRIPT、IMAGE、FLASH、IFRAME、SRC属性等资源的顺序总结
页面响应加载的顺序: 1.域名解析->加载html->加载js和css->加载图片等其他信息 DOM详细的步骤如下: 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚 ...
- POJ 3038 贪心(multiset)
题意: 思路: 1. 贪心 我们考虑肯定是走最近的最合适 想象自己是一个黑一日游的司机: 1.如果有乘客要上车,那么就让他上,收钱! 2.如果超载了,把距目的地最远的几个乘客踢下去,退钱. 3.行驶到 ...
- Linux系统下到哪儿寻找硬件错误
Linux系统下到哪儿寻找硬件错误 当linux系统出现故障的时候,作为管理员首先要定位错误,现在linux有许多工具都能帮助用户寻找错误,要学会利用他们确定问题.这些工具包括dmesg. ...
- 从硬件到语言,详解C++的内存对齐(memory alignment)(一)
作者:赵宗晟 出处:https://www.cnblogs.com/zhao-zongsheng/p/9099603.html 很多写C/C++的人都知道“内存对齐”的概念以及规则,但不一定对他有很深 ...