JavaScript 的setAttribute问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript 的setAttribute问题相关的知识，希望对你有一定的参考价值。
<div id="div1" class="class1></div>
然后我用
div1.setAttribute("class","class2")这样改变class但是不能兼容所有游览器
就指IE说，IE8可以显示正常，IE6 IE7就不能。
代码也是网上抄袭的，谁能帮我写个可以判断游览器然后给出不同游览器命名class的规则
意思也就是兼容所有游览器……
<script type="text/javascript">
var Sys = ;
var ua = navigator.userAgent.toLowerCase();
window.ActiveXObject ? Sys.ie = ua.match(/msie ([\\d.]+)/)[1] :
document.getBoxObjectFor ? Sys.firefox = ua.match(/firefox\\/([\\d.]+)/)[1] :
window.MessageEvent && !document.getBoxObjectFor ? Sys.chrome = ua.match(/chrome\\/([\\d.]+)/)[1] :
window.opera ? Sys.opera = ua.match(/opera.([\\d.]+)/)[1] :
window.openDatabase ? Sys.safari = ua.match(/version\\/([\\d.]+)/)[1] : 0;
//以下进行测试
if(Sys.ie) document.write(\'IE: \'+Sys.ie);
if(Sys.firefox) document.write(\'Firefox: \'+Sys.firefox);
if(Sys.chrome) document.write(\'Chrome: \'+Sys.chrome);
if(Sys.opera) document.write(\'Opera: \'+Sys.opera);
if(Sys.safari) document.write(\'Safari: \'+Sys.safari);
</script>
ps：兼容所有的浏览器是不可能的，这个世界上有数百种浏览器，并且还在不断出现新的浏览器，我们程序员没必要去适应那些极少有人用的浏览器，上述代码能判断市面上使用最多的五种浏览器。 参考技术A IE6,IE7应该用div1.setAttribute("className","class2") 参考技术B 你试下div.className="class2"; 参考技术C 兼容所有浏览器的方法就是使用元素的className来直接设置CLASS
即：div1.className = 'yourname';
javascript中setAttribute()函数使用方法及兼容性
setAttribute()函数可以设置对象的属性，如果不存在此属性，则会创建此属性。
语法结构:
el.setAttribute(name,value)
参数列表:
参数 描述
name 必需。规定要设置的属性名。
value 必需。规定要设置的属性值。
代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript">
window.οnlοad=function()
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("id","newid");
alert(mydiv.getAttribute("id"));
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代码可以重新设置div的id属性值，并且弹出新设置的id属性值。
实例二:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript">
window.οnlοad=function()
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("newAttr","attrValue");
alert(mydiv.getAttribute("newAttr"));
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代码可以设置div的newAttr属性值，并且弹出此属性值。这里需要特别注意的是，因为div默认并不具有newAttr属性，这个时候setAttribute()函数会首先创建此属性，然后再给它赋值。
以上两个代码实例在各主流浏览器中都能够成功的执行，但这并不说明setAttribute()函数能够兼容各个浏览器。
再看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.textcolor
font-size:18px;
color:red;
</style>
<script type="text/javascript">
window.οnlοad=function()
var mydiv=document.getElementById("mydiv");
mydiv.setAttribute("class","textcolor");
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
以上代码，在标准浏览器中能够将字体大小设置为18px，字体颜色设置为红色，但是在IE6和IE7浏览器中却不能够生效。
不过依然可以使用mydiv.getAttribute("class")获取属性值"textcolor"。
也就是说在IE6或者IE7浏览器中，setAttribute()函数可以使用，但是并不是对所有的属性都有效。
下面就列举一下存在上述问题的属性:
1.class
2.for
3.cellspacing
4.cellpadding
5.tabindex
6.readonly
7.maxlength
8.rowspan
9.colspan
10.usemap
11.frameborder
12.contenteditable
13.style
为了解决上述问题就要写一个通用的跨浏览器的设置元素属性的接口方法:
dom=(function()
var fixAttr=
tabindex:'tabIndex',
readonly:'readOnly',
'for':'htmlFor',
'class':'className',
maxlength:'maxLength',
cellspacing:'cellSpacing',
cellpadding:'cellPadding',
rowspan:'rowSpan',
colspan:'colSpan',
usemap:'useMap',
frameborder:'frameBorder',
contenteditable:'contentEditable'
,
div=document.createElement('div');
div.setAttribute('class','t');
var supportSetAttr = div.className === 't';
return
setAttr:function(el, name, val)
el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
,
getAttr:function(el, name)
return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
)();
首先，标准浏览器直接使用原始属性名；其次，IE6/7非以上列举的属性仍然用原始属性名；最后这些特殊属性使用fixAttr，例如class。
那么上面的代码实例修改为以下形式即可:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<style type="text/css">
.textcolor
font-size:18px;
color:red;
</style>
<script type="text/javascript">
dom=(function()
var fixAttr=
tabindex:'tabIndex',
readonly:'readOnly',
'for':'htmlFor',
'class':'className',
maxlength:'maxLength',
cellspacing:'cellSpacing',
cellpadding:'cellPadding',
rowspan:'rowSpan',
colspan:'colSpan',
usemap:'useMap',
frameborder:'frameBorder',
contenteditable:'contentEditable'
,
div=document.createElement('div');
div.setAttribute('class','t');
var supportSetAttr = div.className === 't';
return
setAttr:function(el, name, val)
el.setAttribute(supportSetAttr ? name : (fixAttr[name] || name), val);
,
getAttr:function(el, name)
return el.getAttribute(supportSetAttr ? name : (fixAttr[name] || name));
)();
window.οnlοad=function()
var mydiv=document.getElementById("mydiv");
dom.setAttr(mydiv, 'class', 'textcolor');
</script>
</head>
<body>
</body>
</html>
以上代码可以在各主流浏览器中都有效，都可以将字体大小设置为18px，颜色设置为红色。
至于style属性可以使用el.style.color="xxx"这种形式进行兼容。
以上是关于JavaScript 的setAttribute问题的主要内容，如果未能解决你的问题，请参考以下文章
document.getElementById("codeImg").setAttribute("src","code.jsp?time="