前几天工作中遇到一个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一个兼容性问题的更多相关文章

  1. 写一个兼容性比较好的拖拽DEMO

    写一个兼容性比较好的拖拽DEMO 查看Demo 思路 div盒子 鼠标按下事件onmousedown 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标 鼠标抬起事件om ...

  2. js中setAttribute 的兼容性

    js中setAttribute 的兼容性class和className兼容方法: object.setAttribute("class","content") ...

  3. JS中setAttribute的兼容性问题(摘自leejersey)

    class和className兼容方法: object.setAttribute("class","content") 在IE8.Chrome.火狐.Opera ...

  4. setAttribute的兼容性

    class和className兼容方法: object.setAttribute("class","content") 在IE8.Chrome.火狐.Opera ...

  5. 一个兼容性比较好的图片左右滚动的js

    下载地址:http://www.cnblogs.com/RightDear/admin/Files.aspx 文件:shhds.rar

  6. JS setAttribute兼容

    问题和表现: 最近实践中遇到的问题,setAttribute()设置在IE7中,无法设置style等属性.这样就对设置样式带了很大的困扰,例如绑定点击事件来隐藏元素,setAttribute(”sty ...

  7. Javascript兼容性问题汇总

    一.属性相关 我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念, 特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的ou ...

  8. js的一些兼容性易错的的问题

    一.属性相关 我们通常把特征(attribute)和属性(property)统称为属性,但是他们确实是不同的概念,特征(attribute)会表现在HTML文本中,对特征的修改一定会表现在元素的out ...

  9. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...

随机推荐

  1. 使用Ninject来解决程序中组件的耦合问题

    1.为什么要用Ninject? Ninject是一个IOC容器用来解决程序中组件的耦合问题,它的目的在于做到最少配置.其他的的IOC工具过于依赖配置文件,需要使用assembly-qualified名 ...

  2. eclipse创建python项目

    http://jingyan.baidu.com/article/19192ad8173300e53f570757.html

  3. SQL server 为多个表添加新的列

    作为一名.NET未入门的程序员,第一次发随笔. 前不久参与写的公司业务程序,目前这个程序的后期维护修复漏洞工作由我来负责.由于业务关系重大,每一步对程序代码的操作都非常谨慎,一旦操作失误,造成的损失和 ...

  4. lintcode:寻找旋转排序数组中的最小值 II

    寻找旋转排序数组中的最小值 II 假设一个旋转排序的数组其起始位置是未知的(比如0 1 2 4 5 6 7 可能变成是4 5 6 7 0 1 2). 你需要找到其中最小的元素. 数组中可能存在重复的元 ...

  5. libprotobuf ERROR

    google/protobuf/wire_format.cc:1059] Encountered string containing invalid UTF-8 data while parsing  ...

  6. SSL简介

    注:本文基于互联网内容整合而成,非原创.参考文章参加[7.参考资料].引用时请附上原文地址. SSL(Secure Socket Layer,安全套接字层)是位于可靠的面向连接的网络层协议和应用层协议 ...

  7. qt练习10 涂鸦板源代码

    源代码下载: http://files.cnblogs.com/hnrainll/doodle.zip http://www.cnblogs.com/hnrainll/archive/2011/05/ ...

  8. Spring笔记——依赖注入

    依赖注入有三种方式: 1. 使用构造器注入  2. 使用属性setter方法注入 3. 使用Field注入(用于注解方式) 注入依赖对象可以采用手工装配或自动装配,在实际应用中建议使用手工装配,因为自 ...

  9. MyBatis学习总结_09_使用MyBatis Generator自动创建代码

    一.构建一个环境 1. 首先创建一个表: CREATE TABLE t_user ( USER_ID INT NOT NULL AUTO_INCREMENT, USER_NAME CHAR(30) N ...

  10. Android Edittext 显示光标 获取焦点 监听焦点

    Edittext java 代码控制获取焦点 EditText mEditText = (EditText) findViewById(R.id.et); mEditText.setFocusable ...