setAttribute一个兼容性问题
前几天工作中遇到一个js问题,本来js就不大会,倒腾了好长时间,并在做弹窗的时候用到了setAttribute,出现了不兼容的问题,在网上查了好多,真是郁闷,看来啥都得学啊。
主要的工作是做一个根据时间段变化图片的背景色,并在每一个时间段开始的同时同步进行倒计时,唉,两个分开来做都很好做,但是整合到一起的时候就麻烦了,倒计时的时候不会进行刷新......先说这个弹窗问题,在不是上述时间段的时候,不能购买产品,弹出一个弹窗来提示用户,我是用setAttribute做的,但是在做成效果之后,遇到了有些浏览器不兼容的问题。下面来说说:
本来写的代码是<a id="a1"><img src="" width="107" height="37" alt="" /></a>
<script>
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一个兼容性问题的更多相关文章
- 写一个兼容性比较好的拖拽DEMO
写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...
- js中setAttribute 的兼容性
js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...
- JS中setAttribute的兼容性问题(摘自leejersey)
class和className兼容方法: object.setAttribute("class","content") 在IE8.Chrome.火狐.Opera ...
- setAttribute的兼容性
class和className兼容方法: object.setAttribute("class","content") 在IE8.Chrome.火狐.Opera ...
- 一个兼容性比较好的图片左右滚动的js
下载地址:http://www.cnblogs.com/RightDear/admin/Files.aspx 文件:shhds.rar
- JS setAttribute兼容
问题和表现: 最近实践中遇到的问题,setAttribute()设置在IE7中,无法设置style等属性.这样就对设置样式带了很大的困扰,例如绑定点击事件来隐藏元素,setAttribute(”sty ...
- Javascript兼容性问题汇总
一.属性相关 我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念, 特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的ou ...
- js的一些兼容性易错的的问题
一.属性相关 我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念,特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的out ...
- [转载]强制不使用“兼容性视图”的HTML代码
在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...
随机推荐
- zoj Fibonacci Numbers ( java , 简单 ,大数)
题目 //f(1) = 1, f(2) = 1, f(n > 2) = f(n - 1) + f(n - 2) import java.io.*; import java.util.*; imp ...
- Manacher算法 O(n) 求最长回文子串
转自:http://bbs.dlut.edu.cn/bbstcon.php?board=Competition&gid=23474 其实原文说得是比较清楚的,只是英文的,我这里写一份中文的吧. ...
- Linux网络编程4——个人总结
TCP与UDP通信流程 TCP通信的基本步骤如下: 服务端:socket---bind---listen---while(1){---accept---recv---send---close---}- ...
- 两台笔记本搭建openvswitch网络
环境说明: 笔记本A.B均运行Ubuntu 14.04,两台笔记本通过无线网卡上网,用一根网线连接两台笔记本的有线网卡. 网络拓扑: 其中,vm1 vm2 S1位于笔记本A,vm3 vm4 S2位于笔 ...
- C/C++ 位域知识小结
C/C++ 位域知识小结 几篇较全面的位域相关的文章: http://www.uplook.cn/blog/9/93362/ C/C++位域(Bit-fields)之我见 C中的位域与大小端问题 内存 ...
- Centos环境下部署游戏服务器-常用命令
图1 在Linux的世界,如果你不玩命令,那你见了同行都不好意思和人家打招呼.同时服务器正常状况下放在远端,一般都是开ssh登录服务器,相信远程桌面的人很少见吧.这篇文章说说Linu ...
- Photoshop:不起眼的背景橡皮擦
背景橡皮擦工具是通过颜色的容差来进行工作的,“+”是定位点,当“+”光标位置在要擦除的位置上的时候,就能擦出比较好的效果. 取样连续:擦除的效果比较连续. 取样一次:不松开鼠标键,也不用担心“+”字中 ...
- css属性
文本: color 颜色 line-height 行高 direction 文本方向 letter-spacing 字符间距 text-align 对齐方式 text-decoration 文本修饰 ...
- ActiveMQ简单的HelloWorld实例
我们使用ActiveMQ为大家实现一种点对点的消息模型. 开发时候,要将apache-activemq-5.12.0-bin.zip解压缩后里面的activemq-all-5.12.0.jar包加入到 ...
- Redis的String操作
set key value [ex 秒数] / [px 毫秒数] [nx] /[xx] 如: set a 1 ex 10 , 10秒有效 Set a 1 px 9000 , 9秒有效 注: 如果ex, ...