使用javascript添加（而不是替换）css类

我使用的是ddsmoothmenu，它的构造方式是可以通过插件将类名动态添加到父菜单容器中，并且类应用于父容器，所有的CSS也将应用在菜单上。这里是ddsmoothmenu是如何通过类名：使用javascript添加（而不是替换）css类

<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"

我想要的东西，像上面行，这样，我在标记硬编码类到达而插件添加的插件只会附加到我直接添加到标记中的类中？

来源

2014-12-19 Athapali

不能使用jQuery的任何原因？ – Pseudonym

我可以使用jQuery。我如何在jQuery中做这样的事情？ '$ mainmenu.parent（）。get（0）.className + = setting.classname || “ddsmoothmenu”'我知道这可能在语法上不正确，你知道我要去哪里.. – Athapali

好吧它已被删除 – Pseudonym

所有你需要做的就是把当前的类名，添加一个空格给它，并添加第二个类名。我知道你想使用一个库，但普通的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; 
}

同样，不知道你怎么想选择文档对象，但只要你添加类名之间的空间，都应该不错。

来源

2014-12-19 21:26:05

这里是从jQuery API文档上addclass功能的描述：

说明：将指定的类（或多个）到每个组的匹配的元素。

版本加入：1.0.addClass（类名）的className类型：String一个或更多空格分隔的类被添加到的每一个匹配元素的类属性。

版本加入：1.4.addClass（功能）功能类型：函数（整数索引，字符串currentClassName）=> String一个函数返回一个或多个空间分隔的类名被添加到现有的类名（ S）。接收集合中元素的索引位置和现有类名称作为参数。在函数内，这是指集合中的当前元素。

下面是一个例子使用jQuery的addclass功能是似乎做你问什么了。

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

（啊总是忘记我不能发布HTML）不删除任何其他类

本质上，它只是在指定的类到所选元素固定物。

Here是链接到API文档

来源

2014-12-19 21:24:39 Pseudonym

我喜欢用classie。它提供了一种向DOM添加或删除类的稳定方法。好处是，它为没有classList功能的浏览器提供了回退（例如IE8）。

如果你只是为了寻找代码段：

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

和

addClass = function(elem, c) { 
    elem.className = elem.className + ' ' + c; 
};

来源

2014-12-19 21:28:06 ChiefORZ

使用javascript添加（而不是替换）css类

回答

相关问题