`
linwei_211
  • 浏览: 191336 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

setAttribute()的使用方法与ie不兼容onclick事件解决方法

js 
阅读更多

setAttribute()的使用方法与ie不兼容onclick事件解决方法


1.element要用getElementById or ByTagName来得到,

2.setAttribute("class", vName)中class是指改变"class"这个属性,所以要带引号。

3.IE中要把class改成className,.....IE不认class,所以最好写两句,都用上吧。

W3C DOM - {setAttribute()}

 

setAttribute(string name, string value):增加一个指定名称和值的新属性,或者把一个现有的属性设定为指定的值。

1、关于class和className
class属性在W3C DOM中扮演着很重要的角色,但由于浏览器差异性仍然存在。使用setAttribute("class", vName)语句动态设置
Element的class属性在firefox中是行的通的,在IE中却不行。因为使用IE内核的浏览器不认识"class",要改用"className";
同样,firefox 也不认识"className"。所以常用的方法是二者兼备:
element.setAttribute("class", vName);
element.setAttribute("className", vName);  //for IE

 

2、setAttribute()的差异
      我们经常需要在JavaScript中给Element动态添加各种属性,这可以通过使用setAttribute()来实现,这就涉及到了浏览器的兼容性问题。
var bar = document.getElementById("foo");
bar.setAttribute("onclick", "javascript:alert('This is a test!');");


     这里利用setAttribute指定e的onclick属性,简单,很好理解。但是IE不支持,IE并不是不支持setAttribute这个函数,而是不支持用setAttribute设置某些属性,例如对象属性、集合属性、事件属性,也就是说用setAttribute设置style和onclick这些属性在IE中是行不通的。为达到兼容各种浏览器的效果,可以用点符号法来设置Element的对象属性、集合属性和事件属性。

程序代码document.getElementById("foo").className = "fruit";
document.getElementById("foo").style.cssText = "color: #00f;";
document.getElementById("foo").style.color = "#00f";
document.getElementById("foo").onclick = function () { alert("This is a test!"); }


//注意1.这里的function这一段千万不要画蛇添足用引号引上,不信你可以试下,引上点click就没反应了
//注意2.onclick后面的方法不能传参数,例如要去调方法set_top_visible,需要参数
错误的写法:img.onclick = set_top_visible("none");
正确的写法:img.onclick = function(){set_top_visible("none");}
    
 function set_top_visible(v){
     (!v) && (v = "block");
            try
            { 
                document.getElementById("top_tooltip").style.display=v;
            }
            catch(e){}
        }
例如要去调方法showMsg,不需要参数
错误的写法:img.onclick = showMsg();
正确的写法:img.onclick = showMsg;
 function showMsg(){
     alert('hello!');
        }   

 

 

分享到:
评论

相关推荐

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    IE8中的JavaScript点击...因此,在使用这些方法时,务必确保传递给`eval`的字符串是可控的,最好不与用户输入直接相关,或者寻找更安全的替代方案,比如使用现代的事件处理机制、通过模板字符串来构建代码字符串等。

    IE6用setAttribute添加事件无效

    当尝试使用`setAttribute`的`'onclick'`等事件属性时,IE6可能会忽略这些设置,导致事件处理程序无法正常工作。 这个问题的核心在于,IE6不通过`setAttribute`来处理DOM元素的事件绑定,而是需要使用`attachEvent`...

    IE 不兼容的几个js问题及解决方法

    ### IE浏览器中的JavaScript不兼容性问题及解决方案 #### 一、Table操作问题 ...通过以上方法,我们可以有效地解决JavaScript在IE浏览器中的一些不兼容性问题,并提高Web应用的兼容性和用户体验。

    JavaScript的setAttribute兼容性问题解决方法

    具体来说,在早期的Internet Explorer(IE)浏览器中,直接使用`setAttribute`方法来设置`onclick`事件监听器可能会不起作用,而相同的代码在Firefox等其他浏览器中却可以正常工作。这是因为不同浏览器对`...

    javascript兼容性解决方法大全

    通用的方法是使用`getAttribute`和`setAttribute`方法,如`div1.getAttribute("value")`和`div1.setAttribute("value", val)`。 综上所述,解决JavaScript的浏览器兼容性问题通常需要对各个浏览器的特性有深入理解...

    ajax中的IE和火狐的区别

    - **设置点击事件**: 在绑定事件处理程序时,Firefox支持直接使用`element.onclick = function() {...}`的形式,而IE需要通过`setAttribute`来实现。 - Firefox中可以直接使用`obj.onclick = function(){func();}`...

    javascript动态添加事件.pdf

    在不同的浏览器中,实现方式略有差异,主要涉及到IE浏览器与非IE浏览器的兼容性问题。以下是关于JavaScript动态添加事件的一些关键知识点: 1. **setAttribute方法**: - `setAttribute` 是一个通用的方法,用于...

    IE DOM实现存在的部分问题及解决方法

    然而,IE并不支持这种方式,它需要使用“标记法”来设置事件处理程序,这意味着你需要将处理函数直接绑定到事件上,通常是通过匿名函数来实现: ```javascript document.getElementById("id").onclick = function()...

    javascript动态添加事件[文].pdf

    对于IE浏览器,我们需要使用方法二,即`attachEvent`。这是一个IE特有的方法,用于添加事件监听器: ```javascript obj.attachEvent("onclick", Foo); function Foo() { alert("测试"); } ``` 而在非IE浏览器中,...

    javascript中setAttribute兼容性用法分析

    - 注意,直接使用`setAttribute`设置样式属性(如`style`)在IE中可能不生效,应使用点符号法来设置样式,如`element.style.color = "#00f"`。 4. **方法属性和事件属性**: - `setAttribute`不适用于设置对象...

    使用jQuery解决IE与FireFox下createElement方法的差异

    总之,要处理IE和Firefox下`createElement`方法的差异,可以使用jQuery提供的跨浏览器功能,如`$`函数和事件绑定方法,来统一创建元素和添加事件监听器的方式。这样不仅可以简化代码,还能提高代码的可维护性和兼容...

    JavaScript中setAttribute用法介绍

    不过,需要注意的是,IE并不支持使用`setAttribute()`来设置某些特定属性,特别是对象属性、集合属性和事件属性,如`style`和`onclick`。在这种情况下,我们应该使用点符号法(dot notation)来代替: ```...

    多种方法实现JS动态添加事件

    但需要注意的是,`setAttribute`在Internet Explorer浏览器中对于某些属性(如对象属性、集合属性和事件属性)的支持有限,包括`style`、`onclick`、`onmouseover`等,因此在IE中使用这种方法可能无法正常工作。...

    js 动态加载事件的几种方法总结

    有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。 方法一、setAttributevar obj = document....

    javascript setAttribute, getAttribute 在不同浏览器上的不同表现

    测试环境(客户端浏览器 ) IE6,IE7, IE8兼容模式, IE8 Firefox 3.6.8, google chrome 5.0.375.125 先来说明两个函数的标准定义。 elementNode.setAttribute(name,value) name 必需。规定要设置的属性名。 value ...

Global site tag (gtag.js) - Google Analytics