使用 JavaScript 添加(而不是替换）CSS 类

add (not replace) css class using javascript

本文关键字：替换 CSS JavaScript 添加 使用      更新时间：2023-09-26

我正在使用ddsmoothmenu，它的构造方式是可以通过插件将类名动态添加到父菜单容器中，一旦类应用于父容器，所有css也将应用于菜单。以下是 ddsmoothmenu 传递类名的方式：

<div id="myMenu">
  <ul>
     <li>.....</li>
  </ul>
</div>
菜单

的渲染由以下内容完成，其中"类名"通过插件传递以动态添加到菜单容器中。

ddsmoothmenu.init({
    mainmenuid: 'myMenu',
    orientation: 'h',
    classname: 'ddsmoothmenu',
    contentsource: 'markup'
});

目前为止，一切都好。但是我需要在菜单容器中添加一个"noindex"类。我认为这很容易，我将简单地添加标记，但问题是插件替换了我的类并添加了上述"classname"参数提供的任何内容。

在插件本身中：这行代码是罪魁祸首：

$mainmenu.parent().get(0).className = setting.classname || "ddsmoothmenu"

其中$mainmenu基本上是无序列表。

我知道我可以做一个简单的 += 来连接类名。但我不确定这在上面是否可行，因为它具有ternary if..else setup

我可以做$mainmenu.parent().get(0).className += setting.classname || "ddsmoothmenu"

我

想要类似上行的内容，以便我在标记中硬编码的类可以保留，而插件添加的类只是附加到我直接在标记中添加的类？

您所要做的就是获取当前的类名，为其添加一个空格，然后添加第二个类名。我知道你想使用一个库，但普通的Javascript可以很容易地做到这一点：

function addclass(name,id) {
    var element = document.getElementById(id); //not sure how you want to obtain your element
    var currentclass = element.className;
    element.className = currentclass + " " + name;
}

同样，不确定如何选择文档对象，但只要在类名之间添加空格，一切都应该很好。

以下是 jquery api 文档中关于 addclass 函数的描述：

说明：将指定的类添加到每个集合中匹配的元素。

添加的版本： 1.0.addClass( 类名 ( 类名 类型： 字符串一或更多空格分隔的类要添加到 的类属性中每个匹配的元素。

添加的版本： 1.4.addClass( 函数 ( 函数类型：函数(整数索引，字符串当前类名(=>字符串A返回一个或多个要添加的以空格分隔的类名的函数到现有类名。接收索引位置元素和现有类名作为参数。在函数，这是指集合中的当前元素。

下面是jquery的addclass函数的示例使用，它似乎完全符合您的要求。

$( "p" ).last().addClass( "selected" );

(呃，一直忘记我不能发布HTML(

从本质上讲，它只是将指定的类附加到所选元素，而不删除任何其他类。

这是 api 文档的链接

我喜欢使用classie。 它提供了一种稳定的方式来添加或删除类到 DOM。好消息是，它为没有classList函数的浏览器(例如IE8(提供了回退。

如果您只是寻找代码片段：

addClass = function( elem, c ) {
    elem.classList.add( c );
};

和

addClass = function( elem, c ) {
    elem.className = elem.className + ' ' + c;
};
相关文章：