使用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類

回答

相關問題