添加css類html元素在wordpress中使用javascript

我正在wordpress中的一個主題我想添加一個新類到元素沒有刪除這個主題中的現有類有一個地方添加javascript代碼主題選項與我的新班級此按鈕將切換到此處的表單是我要添加我的新類的代碼。添加css類html元素在wordpress中使用javascript

<a href="" target="_self" class="mk-button custom button-5509e751af089 dark-color flat-dimension large pointed "><span>ّFORM</span></a>

來源

2015-03-18 Mehran

jQuery是包含在WordPress的，所以它只是'$（」按鈕5509e751af089。 '）addClass（' SomeClass的）。 ' – adeneo 2015-03-18 21:57:40

的jQuery默認情況下，在WordPress包括在內，這可以這樣做：

$('.button-5509e751af089').toggleClass('myClass');

用常規的JavaScript，我會做到以下幾點：

document.getElementsByClassName('button-5509e751af089')[0].classList.toggle('myClass');

這些方法只會切換第一個項目的類，不像jQuery的答案。在班級名冊here

如果您希望類的價值

的更多信息是從輸入，具有以下
jQuery的替代'myClass'：

$('input.myInput').val();

的JavaScript：

document.getElementsByClassName('inputClassHere')[0].value

編輯：也可以使用 .querySelector(".myClass")而不是 .getElementsByClassName('myClass')[0]

來源

2015-03-18 22:01:14 Downgoat

而不是使用'document.getElementsByClassName（'class'）[0]'，可以簡單地使用'document.querySelector（'。class'）'。 – 2015-03-18 22:05:13

@PierreWahlgren有效點，但querySelector有更高的支持，但速度較慢。考慮到這只是一個因素，它可能不會產生這樣的差異。 – Downgoat 2015-03-18 22:08:20

是的，正好。如果它是一個大的元素列表，我也會選擇'getElementsByClassName'。但在這種情況下，我認爲這是一個更優雅的解決方案，可以擺脫'[0]'。： - ） – 2015-03-18 22:15:05

它取決於是否要將此類添加到頁面上的所有按鈕或只有一個。假設你希望所有的按鈕，你會做以下幾點：

var elements = document.querySelectorAll(".mk-button"); 
 

 
for(var i = 0; i < elements.length; ++i) { 
 
    var el = elements[i] 
 
    el.className = el.className + " new-class-here"; 
 
}

來源

2015-03-18 22:06:11

感謝您的回答，但您的問題不起作用 – Mehran 2015-03-19 08:57:15

添加css類html元素在wordpress中使用javascript

回答

相關問題