添加另一個類到一個元素，但作爲第一個類

我想添加另一個類到一個元素，但其中一些元素已經有一個現有的類，但是我添加的類我希望它是first class添加在類字段中，不想追加它;因爲從我所知道的情況來看，一般來說，最後列出的類中的規則將覆蓋前一類中的規則，正確！添加另一個類到一個元素，但作爲第一個類

我知道下面一個jQuery方法..

$("p").addClass("myClass");

從我的理解這只是追加類，你不能選擇在哪裏把它

不過。

是否有任何方法可以輕鬆完成此操作，還是必須開始刪除類並重新添加它們？

來源

2013-05-26 Brett

只是改變你的規則的特異性，而不是在這裏黑客？（通過在你的規則中加上星號） – bwoebi

上一個列出的類中的規則將覆蓋前一類中的規則，這是在css聲明中，而不是在class屬性中。 – Musa

首先創建一些場景來測試這一點。有兩種風格的CSS，然後以不同的順序將相同的兩個類應用於兩個div。之後，重新安排在CSS文件中的聲明，並重新運行測試。在我看來，聲明的順序只是計數（後來聲明/包含了勝利） – kms

不確定是否需要這樣做，我個人喜歡@ bwoebi的建議只是改變特定性。

但還是如果你需要它，這可能幫助

HTML

<div class="second">Lorem text</div>

jQuery的

var $div = $('div'), 
    classes = $div.attr('class'); 
$div.attr('class', 'first' + ' ' + classes);

你可以把你的變量，它含有取代的類名'first'

Demo

來源

2013-05-26 19:47:55 Sourabh

只是爲了以防樂趣，你想在一個特定的索引添加新的類當前類中：

http://jsfiddle.net/ckzVk/

function addClassAtIndex(elementId,classNameToAdd,index){ 
    var element = document.getElementById(elementId); 
    var elementClasses = element.className.split(" "); 
    elementClasses.splice(index,0,classNameToAdd); 
    var newClasses = elementClasses.join(" "); 
    element.className = newClasses; 
}

類「人」添加到DIV：

<div id="stuff" class="cool bro sweet">The div.</div>

JS：

addClassAtIndex("stuff","man",1");

結果：

<div id="stuff" class="cool man bro sweet">The div.</div>

來源

2013-05-26 20:01:46 Nile

您通過簡單的分離使用空間的類的元素添加多個類別。例如：

<p class="key_paragraph dark no_border">Your text here</p> 
<p class="key_paragraph dark">Your text here</p>

其中類在HTML屬性不要緊列出的順序。重要的是樣式表。

在您的樣式表（css文件）中，如果您希望任何類都可以重寫另一個類，則可以更改樣式表中規則的順序。例如，如果類'dark'具有邊框，而類'no_border'不具有，那麼必須在樣式表中將'no_border'放在'dark'之後，以確保'no_border'覆蓋第一段的'dark'。像這樣：

.dark { 
    border: 2px solid red; 
} 

.no_border { 
    border: none; 
}

其次，無論css規則的順序如何，您都可以添加特定功能。例如，組合類來表示「如果一個元素具有黑暗和紅色的類別」比上述兩個規則中的任何一個更具體。有關特異性的更多信息，請參閱here。因此，下面的規則將確保有與類「黑暗」和它們出現在stlesheet秩序的「NO_BORDER」無論元素無邊框：

.dark.no_border { 
    border: none; 
} 

.dark { 
    border: 2px solid red; 
}

第三種選擇是使用CSS ：不選擇所有具有「黑暗」類的元素，但不具有「no_border」類。同樣，樣式表中規則的順序在這裏也不重要。這是做如下：

.no_border { 
    border: none; 
} 

.dark:not(.no_border) { 
    border: 2px solid red; 
}

還有其他的方法可以做到這一點，但我希望我在你能理解的方式解釋三種簡單的方式。還有一個更特別的jQuery演示here（請參閱第三個示例）。如果您有任何問題，請告訴我。

來源

2013-05-26 20:06:11

添加另一個類到一個元素，但作爲第一個類

回答

相關問題