`
zhangchibang
  • 浏览: 347399 次
社区版块
存档分类
最新评论

JavaScript操作DOM元素中的class属性

JavaScriptIEOperaSafariFirefox 
阅读更多

在交互性较强的Web应用中，经常需要动态更改指定元素的属性值，假设变量e是页面中一个元素的引用，根据W3C DOM标准，可以在JavaScript中使用e.getAttribute('属性名')来取得属性的值，并且用e.setAttribute('属性名', '值')来设置属性值。网页标签中，class是一个常用的属性，用于指定某一个元素遵从一个或多个自定义样式，由于class属于JavaScript保留值，因此当我们要操作元素的class属性值时，直接使用e.getAttribute('class')和e.setAttribute('class', 'value')可能会遭遇浏览器兼容性问题。

　　W3C DOM标准为每个节点提供了一个可读写的className属性，作为节点class属性的映射，标准浏览器的都提供了这一属性的支持，因此，可以使用e.className访问元素的class属性值，也可对该属性进行重新斌值。而IE和Opera中也可使用e.getAttribute('className')和e.setAttribute('className', 'value')访问及修改class属性值。相比之下，e.className是W3C DOM标准，仍然是兼容性最强的解决办法。

　　以下列表说明了上文提及的三种做法的浏览器兼容性测试：

  • e.className 能在IE、Mozilla(Firefox)、Opera和Safari正确运行
  • e.getAttribute('class')和e.setAttribute('class', 'value') 能在Mozilla(Firefox)和Opera中正确运行，在IE和Safari中则不能使用。
  • e.getAttribute('className') 在IE和Opera中正确运行，在Mozilla(Firefox)和Safari中则不能使用。
分享到：
| javascript数据类型转换
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript实现获取dom中class的方法

    本文主要介绍了如何使用JavaScript来获取DOM（文档对象模型）中具有特定class的DOM元素。在讲解的过程中，涉及到JavaScript操作DOM节点的一些基本技巧和方法，如使用`getElementsByClassName`和`...

    JS操作DOM元素属性和方法大全

    **JS操作DOM元素属性和方法大全** 在JavaScript中，DOM（Document Object Model）是一种标准，用于表示HTML或XML文档的结构，并提供了与这些文档交互的方法。DOM是浏览器提供的一种接口，使得JavaScript能够读取、...

    javascript 操作DOM

    下面将详细阐述在JavaScript中如何进行DOM操作。 1. **访问相关的节点**： 访问DOM节点通常通过`getElementById`、`getElementsByClassName`、`getElementsByTagName`、`querySelector`和`querySelectorAll`等方法...

    javascript_DOM操作.rar

    在这个压缩包文件“javascript_DOM操作.rar”中，我们可以找到一个名为“javascript_DOM操作.docx”的文档，它很可能是详细介绍了JavaScript与DOM交互的相关知识。 首先，DOM是网页内容的树状表示，它将HTML或XML...

    JavaScript中Dom操作实例详解.docx

    更多关于 JavaScript 相关内容感爱好的读者可查看本站专题：《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...

    JavaScript DOM元素常见操作详解【添加、删除、修改等】

    在JavaScript中，可以使用`getAttributeNode`方法获取元素的属性节点，这允许我们访问属性节点的类型、名称和值。 ### 添加和删除DOM元素 添加元素通常需要先创建一个新的元素节点，然后将其插入到DOM树中的合适...

    JavaScript程序设计-操作DOM元素的节点及关系.pdf

    DOM元素的节点及关系是JavaScript编程中至关重要的概念，因为它们提供了对页面内容进行查找、修改和操作的基础。 1. 节点类型与属性 `element.nodeType` 属性返回一个整数值，指示节点的类型。常见的类型有： - 1...

    javascript 操作 dom 的常用方法

    在JavaScript中，DOM（文档对象模型）操作是网页动态交互的核心。以下是一些常见的JavaScript DOM操作方法，这些方法在ASP.NET环境下同样适用： 1. `appendChild` 方法：这个方法用于在指定元素的子节点列表末尾...

    js基础之DOM中元素对象的属性方法详解

    下面列举了HTML DOM中元素节点共有的属性和方法： 1. element.id：设置或返回元素的id属性值。 2. element.innerHTML：获取或设置元素的内部HTML，可以包含子元素。 3. element.innerText：获取或设置元素的文本...

    JavaScript DOM编程艺术 第2版 及源码

    2. **选择元素**：书中详细介绍了如何使用`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法以及CSS选择器来选取网页中的特定元素，这些都是JavaScript DOM编程的基础。 3. **事件处理**...

    整理JavaScript对DOM中各种类型的元素的常用操作

    DOM将网页结构解析为一系列可操作的节点，这些节点包括元素、属性、文本等。下面将详细讨论DOM中不同类型的节点以及常用的节点操作。 首先，节点类型由`nodeType`属性定义，常见的取值有： 1. `1`: 元素节点，例如`...

    JavaScript操作DOM元素的childNodes和children区别

    在JavaScript编程中，操作DOM（文档对象模型）是非常常见的任务，因为几乎所有的前端开发都需要通过DOM来与页面上的元素进行交互。DOM提供了丰富的API供我们操作网页上的各个元素。本文将重点讲解两个属性——...

    javaScript 生成DOM 对象（html标签）.rar

    在“JavaScript 动态生成.txt”中可能包含了关于如何动态生成和操作DOM的具体示例代码，比如创建表单元素、添加事件监听器等。这些技巧在构建交互式网页时非常实用。 在实际应用中，我们还常常需要处理嵌套的DOM...

    七、深入JavaScript的DOM（三）.rar

    JavaScript是Web开发中不可或缺的一部分，尤其在操作DOM（Document Object Model）方面，它的重要性更是不言而喻。这篇博文“七、深入JavaScript的DOM（三）”深入探讨了JavaScript与DOM之间的互动，以及如何利用...

    在javascript中对于DOM的加强

    本文将深入探讨DOM在JavaScript中的应用，包括DOM的基本概念、节点类型、节点层次结构和如何查找并操作DOM节点。 一、DOM概念 DOM是Document Object Model（文档对象模型）的缩写，是一种以树状结构来表示HTML或XML...

    原生JavaScript来实现对dom元素class的操作方法(推荐)

    通过这些代码，开发者可以学习如何使用原生JavaScript来直接操作DOM元素的class属性，从而对元素的样式进行动态控制。 总而言之，通过学习如何使用原生JavaScript实现对DOM元素class的操作，开发者可以更灵活地控制...

    classhole:三重函数，用于操作DOM元素的class属性

    Classhole是用于处理DOM元素的class属性的（低垃圾）函数的三重奏。 函数名称很容易解释。 hasClass hasClass(element, class_name); addClass addClass(element, class_name); removeClass removeClass...

    JavaScript-DOM实战案例

    在JavaScript中，我们可以通过DOM API来操作CSS样式，如获取或设置元素的样式属性，添加、删除或切换CSS类，甚至动态创建CSS规则。`css`文件夹可能包含了用于案例展示的样式文件，例如`.css`后缀的文件，这些文件中...

    JavaScript DOM资料 网页制作完全手册

    - DOM是网页内容的结构化表示，允许通过JavaScript对网页元素进行操作，如添加、删除、修改。 - DOM模型将HTML或XML文档分解为节点树，每个元素、属性、文本都是一个节点。 - 操作DOM主要涉及节点的选择（如...

Magicbox
Global site tag (gtag.js) - Google Analytics