`

关于用javascript改变class所用的setAttribute()方法

    博客分类:
  • js
阅读更多

需要注意的是:
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!”); }

分享到:
评论

相关推荐

    setAttribute 与 class冲突解决

    这种冲突问题可以通过检测浏览器类型来解决,例如使用 JavaScript 代码来检测浏览器类型,然后根据浏览器类型选择合适的方法来设置 class 属性。 setAttribute 与 class 冲突解决问题需要我们理解浏览器之间的差异...

    js中设置元素class的三种方法小结

    然而,需要注意的是,某些旧版浏览器(如IE6和IE7)并不支持使用`setAttribute`方法来设置class属性。这可能会导致这些浏览器中的元素不能正确地应用新的class样式。 接着,第二种方法涉及到`className`属性: 2. ...

    javascript中setAttribute()函数使用方法及兼容性

    1. **class属性**:在IE6和IE7中,使用`setAttribute()`设置class属性时,可能不会生效。 2. **for属性**:在IE6和IE7中,`for`属性可能需要通过`setAttribute()`设置为`htmlFor`。 3. **cellspacing和cellpadding**...

    JavaScript中setAttribute用法介绍

    首先,当我们需要改变元素的CSS类(class)时,`setAttribute("class", value)`通常被用来设置新的类名。例如,如果我们创建了一个新的`<input>`元素,并希望给它添加一个名为"bordercss"的类,我们可以这样写: ``...

    html事件如何改变矩形大小-JavaScript-来改变矩形大小

    在这个函数中,我们使用 `document.getElementById` 方法获取到矩形元素,然后通过 `setAttribute` 方法设置新的宽度和高度属性值,从而改变矩形的大小。 除了直接更改属性值,还可以利用 CSS3 的 `transition` 或 ...

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

    3. 在使用`setAttribute`方法时,可以利用浏览器对于`javascript:`协议的支持来解决兼容性问题,但在代码中应尽量避免使用`javascript:`前缀,因为它可能导致XSS(跨站脚本攻击)的安全风险。 4. 对于复杂的交互...

    IE6用setAttribute添加事件无效

    标题“IE6用setAttribute添加事件无效”涉及到的是一个在JavaScript编程中常见的问题,尤其是在处理旧版Internet Explorer(尤其是IE6)浏览器时。在现代浏览器中,`setAttribute`方法可以方便地为HTML元素添加属性...

    setAttributeremoveAttribute in Javascript.zip

    `setAttribute` 方法的使用方式如下: ```javascript element.setAttribute(attributeName, attributeValue); ``` 这里的 `element` 是你想要操作的DOM元素,`attributeName` 是你想要添加或修改的属性名,而 `...

    javascript 操作 dom 的常用方法

    11. `setAttribute` 和 `getAttribute` 方法:`setAttribute`用来设置元素的属性值,如`element.setAttribute("class", "myClass")`;而`getAttribute`用于获取属性的值,如`var className = element.getAttribute(...

    javascript中setAttribute兼容性用法分析

    本文实例分析了javascript中setAttribute兼容性用法。分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX。 2:自定义属性建议使用node.getAttribute(“XXXX”)。 3:当获取的目标是JS里的关键字时建议...

    计算机后端-PDO13PDO对象的setAttribute方法.avi

    计算机后端-PDO13PDO对象的setAttribute方法.avi

    javascript兼容性解决方法大全

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

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

    具体到文章中的解决方案,是通过创建一个`<a>`元素,然后使用`a.setAttribute`方法设置onclick事件处理器。但是因为IE8不支持这种方式,所以改用jQuery的`attr`方法。由于直接设置`onclick`属性并未生效,最终的解决...

    jQuery与JavaScript节点创建方法的对比.docx

    在网页开发中,jQuery 和 JavaScript 都提供了创建和操作 DOM 节点的方法,但它们在语法和效率上存在一定的差异。本篇文章主要探讨了两者在创建节点方面的区别。 首先,我们来看一下创建一个 h1 标签并将其作为 div...

    JavaScript改变HTML元素的样式改变CSS及元素属性

    下面是一个使用`setAttribute`方法的例子,这段代码会为id为“d1”的元素添加或改变其`class`属性,赋值为"abc": ```javascript var div=document.getElementById('d1'); div.setAttribute("class","abc"); ``` 在...

    DOM Scripting.Web.Design.with.JavaScript.and.the.Document.Object.Model(JavaScript DOM编程艺术)

    《DOM Scripting: Web Design with JavaScript and the Document Object Model》是由Jeremy Keith撰写的一本关于JavaScript和DOM编程的经典著作。这本书深入浅出地介绍了如何利用JavaScript动态操控网页内容,提升...

Global site tag (gtag.js) - Google Analytics