我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。
1、样式问题
setAttribute("class", value)中class是指改变"class"这个属性,所以要带引号。
vName代表对样式赋值。
例如:
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);
输出时:<input type="text" name="q" class="bordercss">,即,input控件具有bordercss样式属性
注意:class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。
使用setAttribute("class", vName)语句动态设置Element的class属性在firefox中是行的通的,但在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
element.setAttribute("class", value); //for firefox
element.setAttribute("className", value); //for IE
2、方法属性等问题
例如:
var bar = document.getElementById("testbt");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");
这里利用setAttribute指定e的onclick属性,简单,很好理解。
但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。
为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。
document.getElementById("testbt").className = "bordercss";
document.getElementById("testbt").style.cssText = "color: #00f;";
document.getElementById("testbt").style.color = "#00f";
document.getElementById("testbt").onclick= function () { alert("This is a test!"); }
分享到:
相关推荐
我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题
本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...
主要介绍了javascript中setAttribute()函数使用方法及兼容性的相关资料,需要的朋友可以参考下
JavaScript的setAttribute存在兼容性问题,下面与大家分享下具体的解决方法,感兴趣的朋友可以参考下
ECMAScript中的函数并不介意传递的参数有多少,也不介意是什么类型。由于JavaScript允许函数有不定数目的参数,所以我们需要一种机制,可以在 函数体内 ...这篇文章将详细介绍Javascript中的arguments对象和使用方法。
在java后台使用setattribute方法将后台取到的list集合传到前台,在前台js代码中也可以使用c标签对list集合进行遍历。
@trs是一个JavaScript 1.6+库,用于设置供服务器端JavaScript使用的DOM元素属性。 要求 @trs需要支持,即XML的ECMAScript(E4X)。 支持的ECMAScript引擎:SpiderMonkey,TraceMonkey,ActionMonkey和Rhino。 用法 ...
主要介绍了JavaScript设置获取和设置属性的方法,学会使用getAttribute、setAttribute的用法,需要的朋友可以参考下
根据大体上的意思我感觉js setAttribute与jquery中attr工作是完全一样的,只是jquery中简写了并且工能更强大了,下面我来分别介绍一下他们的用法。 attribute 是原生js dom 对象上的一个属性,这个属性有很多子属性...
在本演练中,我将向您展示如何使用纯JavaScript,HTML和CSS来构建Minesweeper。 这次演练非常有趣,因为我真的很喜欢在南方公园风格的猫的帮助下解释递归。 如果您想知道递归是什么,那么此视频非常适合您! 除此...
* 数据库中查询用户,所以存储用户用session.setAttribute。验证用户用session.getAttribute。 * 一般进行加密存储,方式是用token(用户令牌)进行用户状态保持和验证. * 登录验证流程: ![a525034e1b26357865938eb...
第2章 浏览器中的JavaScript Test4Navigator.htm User-Agent检测法 Test4Window1.htm window对象属性 test4Alert.htm 系统对话框 Test4Timeout.htm 时间间隔和暂停 Test4History.htm 浏览器历史 Test4...
第2章 浏览器中的JavaScript Test4Navigator.htm User-Agent检测法 Test4Window1.htm window对象属性 test4Alert.htm 系统对话框 Test4Timeout.htm 时间间隔和暂停 Test4History.htm 浏览器历史 Test4location....
有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。 方法一、setAttributevar obj = document....
第2章 浏览器中的JavaScript Test4Navigator.htm User-Agent检测法 Test4Window1.htm window对象属性 test4Alert.htm 系统对话框 Test4Timeout.htm 时间间隔和暂停 Test4History.htm 浏览器历史 Test4...
Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法,都是dom core的组成部分。 2. HTML_DOM 使用HTML_DOM来获取表单对象的方法 Document.forms 使用HTML_D