setAttribute一个兼容性问题

前几天工作中遇到一个js问题，本来js就不大会，倒腾了好长时间，并在做弹窗的时候用到了setAttribute，出现了不兼容的问题，在网上查了好多，真是郁闷，看来啥都得学啊。

主要的工作是做一个根据时间段变化图片的背景色，并在每一个时间段开始的同时同步进行倒计时，唉，两个分开来做都很好做，但是整合到一起的时候就麻烦了，倒计时的时候不会进行刷新......先说这个弹窗问题，在不是上述时间段的时候，不能购买产品，弹出一个弹窗来提示用户，我是用setAttribute做的，但是在做成效果之后，遇到了有些浏览器不兼容的问题。下面来说说：

本来写的代码是<a id="a1"><img src="" width="107" height="37" alt="" /></a>

function show(){......

document.getElementbyId("a1").href="#";

document.getElementbyId("a1").setAttribute("onclick","alert( '本时间段秒杀结束，请关注下一时间段！') ");

}

</script>

但是这样写后在tt中并没有弹窗，这就涉及到某些浏览器不是不支持setAttribute这个函数，而是不支持用setAttribute设置某些属性，例如对象、集合、事件属性等。为能够兼容多浏览器，可以用点符号来设置Element的对象、集合和事件属性。所以可以改为document.getElementbyId("a1").onclick=function(){corr();}

function corr(){alert("本时间段秒杀结束，请关注下一时间段！")}这样在tt中就可以看到弹窗了

还有一些其他的例如：document.getElementById("aa").className = "bordercss"; document.getElementById("aa").style.cssText = "color: #00f;"; document.getElementById("aa").style.color = "#00f";都可以将setAttribute换成点符号代替

setAttribute还存在一个样式兼容的问题：

setAttribute("class", value)中class是指改变"class"这个属性，所以要带引号，value为样式赋值。例如: var input = document.createElement("input");//创建一个Input控件，name为q，class为bordercss input.setAttribute("type", "text"); input.setAttribute("name", "q"); input.setAttribute("class",bordercss); 使用setAttribute("class", value)语句动态设置Element的class属性在firefox中是可以的，但在IE中却不行。因为使用IE内核的浏览器不认识"class"，要用"className"替代，同样，firefox 也不认识"className"。所以用下面的方法来兼顾二者：

getElementbyId("aa").setAttribute("class", value); //firefox getElementbyId("aa").setAttribute("className", value); //ie 还有一个问题就是：

input的text,当将html赋值为某个div的innerHTML时,遇到一个现象,当在ff下时(IE下不存在此问题), 赋值后的innerHTML里不含有value,即当在文本框输入内容后,想将<input type=text name=input1 value=”aa”>赋值给div时,只会得到<input type=text name=input1>,这里总是会将value清除.这时用setAttribute就可以了,在input中加上:onkeyup="this.setAttribute(value,this.value)",即动态的将input控件加上value值,这时再将文本框赋值给div,value将不会被清空.

局部刷新的问题，有哪位大侠会，可否帮我留言？谢了

巴特西

setAttribute一个兼容性问题

最新文章

热门文章