一个用JS来给 HTML元素增加或删除className的例子
<HTML>
<HEAD>
<TITLE>testClassName</TITLE>
</HEAD>
<BODY>
<p> </p>
<div id="testDiv" class="cc eee ee"></div>
<script type="text/javascript">
function BrowserCompatible () {}
BrowserCompatible.hasClassName = function(element, className) {
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return false;
//用正则表达式判断多个class之间是否存在真正的class（前后空格的处理）
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) return true;
return false;
}
BrowserCompatible.addClassName = function(element, className) {
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0){
element.className = elementClassName;
return;
}
if (elementClassName == className || elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))) return;
element.className = elementClassName + " " + className;
}
BrowserCompatible.removeClassName = function(element, className) {
if (!element) return;
var elementClassName = element.className;
if (elementClassName.length == 0) return;
if(elementClassName == className) {
element.className = "";
return;
}
if (elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)")))
element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)"))," ");
}
function $(id){
return document.getElementById(id);
}
//alert(BrowserCompatible.hasClassName($("cc"), "cc"));
BrowserCompatible.addClassName($("testDiv"), "rr");
alert($("testDiv").className);
BrowserCompatible.removeClassName($("testDiv"), "ee");
alert($("testDiv").className);
</script>
</BODY>
</HTML>
分享到：
相关推荐
通过上述四种方法，我们可以有效地使用JavaScript来给HTML元素添加、删除多个class。这些技巧不仅提高了代码的可读性和可维护性，还确保了在动态修改元素样式时能够准确无误。希望这些方法能够帮助你在实际开发中...
这是一个典型的动态UI调整，通过JavaScript来实现。 ```html 内容 <td><button class="delete-btn">删除</button></td> ;">添加 ;">全部删除 ``` 接下来，我们编写JavaScript代码来处理这些...
在JavaScript中，`class`是一个保留字，因此我们不能直接使用`element.class`来操作，而是要使用`element.className`。在提供的例子中，有两个函数`over()`和`out()`，它们分别在鼠标悬停和离开时被触发，改变段落`...
当我们谈到JavaScript中的`className`属性时，它是一个非常实用的特性，允许我们动态地改变HTML元素的CSS类，从而改变元素的样式。`className`属性是一个字符串，包含了元素的所有类名，用空格分隔。例如，在下面的...
在“javascript经典特效---元素的详细信息.rar”这个压缩包中，我们可以推测其主要内容是关于JavaScript如何操作和处理HTML元素以实现各种视觉特效。 在HTML文档中，元素是构成网页的基本单元，它们通过标签定义，...
`$(element).html('text')`来改变元素内容，`$(element).click(function() {...})`来绑定点击事件，以及`$(element).addClass('className')`和`.removeClass('className')`来添加或删除CSS类，从而实现样式的变化。...
这个例子展示了如何检查一个 `<p>` 元素是否有子节点，并且在添加了一个文本节点之后再次检查。 #### 十三、DOM 节点类型 在 DOM 中，每个节点都有特定的类型： - **nodeName**: 节点名称。 - 元素节点，如 `<p>...
文件中给出了一个空函数的例子，尽管其内部为空，但结构完整，展示了函数的基本形式。 - **调用函数**：直接使用函数名后跟括号即可调用函数。例如： ```javascript sayHello(); ``` #### 四、DOM操作 - **...
本文将深入讲解如何使用`createElement()`方法来创建新的HTML元素，并将其插入到文档中。`createElement()`是JavaScript DOM（文档对象模型）的一部分，它允许我们通过编程方式创建新的HTML元素。 **一、`...
8. `createElement` 方法：这个方法用于创建一个新的HTML元素。在示例中，`fnCreate`函数根据用户选择创建新的`<option>`元素，并将其插入到下拉列表中。 9. `insertBefore` 方法：此方法允许在已存在的子节点之前...
在使用Vue.js框架进行前端开发时，经常会遇到需要根据用户的鼠标操作来动态地改变页面元素样式的需求。特别是在制作交互式UI时，鼠标移入移出元素时触发的样式变化是一个非常常见的操作。本文将详细介绍如何在Vue...
JavaScript是一种强大的客户端脚本语言，它允许我们在网页上动态地添加、修改或删除元素，包括创建自定义的右键菜单。在HTML中，我们通常通过监听`contextmenu`事件来触发右键菜单的显示。当用户在页面上右键点击时...
JavaScript中的事件绑定是前端开发中一个核心的概念，它涉及让网页元素在特定的操作或触发条件下执行相应的代码。本文将详细介绍事件绑定的方式，包括传统事件绑定和现代事件绑定，以及在事件绑定过程中可能遇到的...
我们可以定义一个子对象类（如`TravelProduct`）来表示单个产品，然后创建一个组合对象类（如`TravelPackage`）来表示包含多个子产品的订单。`TravelPackage`可以拥有添加、删除和访问子产品的功能，同时自身也是一...
jsoup的设计灵感来源于JavaScript库jQuery，因此，对于熟悉jQuery语法的开发者来说，jsoup的学习曲线相对平缓。 ### **核心功能** 1. **HTML解析**：jsoup能够将HTML字符串或URL转换为一个可操作的Document对象。...
首先，DOM是一种以层次结构组织文档的模型，它将文档定义为一个节点树，每个节点代表了文档中的一个部分，比如元素、属性和文本。JavaScript中的HTML DOM操作通常用于动态地访问、添加、修改、删除或移动文档中的...
JavaScript 实现下雪效果是一种常见的网页动态特效，可以增加页面的视觉吸引力，特别是在冬季或节日主题的网页设计中。下面我们将详细探讨如何使用JavaScript来创建一个逼真的下雪动画。 首先，我们需要理解整个...
在JavaScript中，我们可以创建一个HTML元素数组来表示菜单项，然后将它们添加到DOM中。 ```javascript var menu = document.createElement('ul'); menu.className = 'context-menu'; ['复制', '粘贴', '删除']....
**Bootbox.js** 是一个基于 **Bootstrap** 的 JavaScript 库，它为网页应用程序提供了一组优雅的对话框。这些对话框通常用于确认用户操作、显示警告信息或收集用户输入。在网页开发中，对话框是一种常见且重要的交互...
在`removeBtn`的点击事件中，我们获取`boxcon`的最后一个子节点并调用`removeEle`函数，实现删除最后一个节点的功能。 对于初学者来说，理解`this`关键字可能有些困难。在JavaScript中，`this`的值取决于函数调用的...