Jak mogę zmienić klasę elementu za pomocą JavaScript?


2776

Jak mogę zmienić klasę elementu HTML w odpowiedzi na onclickzdarzenie za pomocą JavaScript?


28
„Atrybut klasy jest najczęściej używany do wskazywania klasy w arkuszu stylów. Można go jednak także używać w JavaScript (poprzez HTML DOM) do wprowadzania zmian w elementach HTML określoną klasą.” - w3schools.com/tags/att_standard_class.asp
Triynko

11
element.setAttribute(name, value); Wymień namesię class. Zamień na valuedowolną nazwę nadaną klasie, ujętą w cudzysłów. Pozwala to uniknąć konieczności usuwania bieżącej klasy i dodawania innej. Ten przykład jsFiddle pokazuje pełny działający kod.
Alan Wells

3
Aby zmienić klasę elementu HTML za pomocą onClick, użyj tego kodu: <input type='button' onclick='addNewClass(this)' value='Create' /> oraz w sekcji javascript: function addNewClass(elem){ elem.className="newClass";} Online
Iman Bahrampour

@Triynko - ten link na w3schools zmienił się, wygląda jak we wrześniu 2012 r. Oto ta strona na Archive.org z 12 września 2012 r .: Klasa HTML Attribute-w3schools . Oto link do strony zastępczej na w3schools.com: Klasa HTML Attribute-w3schools .
Kevin Fegan

Odpowiedzi:


3879

Nowoczesne techniki HTML5 do zmiany klas

Nowoczesne przeglądarki dodały classList, który zapewnia metody ułatwiające manipulowanie klasami bez potrzeby posiadania biblioteki:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Niestety, nie działają one w Internet Explorerze przed wersją 10, choć istnieje pewna zaleta, aby dodać obsługę dla IE8 i IE9, dostępnych z tej strony . Jest jednak coraz bardziej wspierany .

Proste rozwiązanie dla różnych przeglądarek

Wykorzystuje się standardowy sposób wybierania elementu w JavaScript document.getElementById("Id"), co wykorzystują poniższe przykłady - możesz oczywiście uzyskać elementy na inne sposoby, a we właściwej sytuacji możesz po prostu użyć this- jednak szczegółowe omówienie tego jest poza zakresem odpowiedzi.

Aby zmienić wszystkie klasy dla elementu:

Aby zastąpić wszystkie istniejące klasy jedną lub większą liczbą nowych klas, ustaw atrybut className:

document.getElementById("MyElement").className = "MyClass";

(Możesz użyć listy rozdzielanej spacjami, aby zastosować wiele klas.)

Aby dodać dodatkową klasę do elementu:

Aby dodać klasę do elementu, nie usuwając / nie wpływając na istniejące wartości, dodaj spację i nową nazwę klasy, tak jak poniżej:

document.getElementById("MyElement").className += " MyClass";

Aby usunąć klasę z elementu:

Aby usunąć pojedynczą klasę do elementu, bez wpływu na inne potencjalne klasy, wymagana jest prosta zamiana wyrażenia regularnego:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Wyjaśnienie tego wyrażenia regularnego jest następujące:

(?:^|\s) # Match the start of the string, or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be end of string or a space)

gFlag opowiada zastąpić powtarzać w miarę potrzeby, w przypadku, gdy nazwa klasy zostało dodanych wiele razy.

Aby sprawdzić, czy klasa jest już zastosowana do elementu:

Ten sam regex użyty powyżej do usunięcia klasy może być również użyty jako sprawdzenie, czy istnieje konkretna klasa:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )


Przypisywanie tych akcji do zdarzeń onclick:

Chociaż możliwe jest pisanie JavaScript bezpośrednio w atrybutach zdarzeń HTML (takich jak onclick="this.className+=' MyClass'"), nie jest to zalecane zachowanie. Zwłaszcza w większych aplikacjach, łatwiejszy do utrzymania kod jest osiągnięty przez oddzielenie znaczników HTML od logiki interakcji JavaScript.

Pierwszym krokiem do osiągnięcia tego jest utworzenie funkcji i wywołanie funkcji w atrybucie onclick, na przykład:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(Nie jest wymagane umieszczanie tego kodu w znacznikach skryptu, służy to jedynie zwięzłości przykładu, a włączenie JavaScript w osobnym pliku może być bardziej odpowiednie).

Drugim krokiem jest przeniesienie zdarzenia onclick z HTML i do JavaScript, na przykład za pomocą addEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Zauważ, że część window.onload jest wymagana, aby zawartość tej funkcji była wykonywana po zakończeniu ładowania HTML - bez tego MyElement może nie istnieć po wywołaniu kodu JavaScript, więc linia się nie powiedzie.)


Frameworky i biblioteki JavaScript

Powyższy kod jest w standardzie JavaScript, jednak powszechną praktyką jest użycie frameworka lub biblioteki w celu uproszczenia typowych zadań, a także skorzystanie ze naprawionych błędów i przypadków brzegowych, o których możesz nie pomyśleć podczas pisania kodu.

Chociaż niektórzy uważają, że przesadą jest dodanie frameworka o wielkości ~ 50 KB do zwykłej zmiany klasy, jeśli wykonujesz znaczną ilość pracy JavaScript lub coś, co może mieć nietypowe zachowanie w różnych przeglądarkach, warto to rozważyć.

(Z grubsza, biblioteka jest zestawem narzędzi zaprojektowanych do określonego zadania, podczas gdy framework zazwyczaj zawiera wiele bibliotek i wykonuje pełny zestaw obowiązków.)

Powyższe przykłady zostały odtworzone poniżej przy użyciu jQuery , prawdopodobnie najczęściej używanej biblioteki JavaScript (choć są też inne, które warto zbadać).

(Uwaga: $tutaj jest obiekt jQuery).

Zmiana klas za pomocą jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Ponadto jQuery zapewnia skrót do dodawania klasy, jeśli nie ma zastosowania, lub usuwania klasy, która:

$('#MyElement').toggleClass('MyClass');


Przypisywanie funkcji do zdarzenia click za pomocą jQuery:

$('#MyElement').click(changeClass);

lub bez potrzeby posiadania identyfikatora:

$(':button:contains(My Button)').click(changeClass);



105
Świetna odpowiedź, Peter. Jedno pytanie ... dlaczego lepiej jest używać JQuery niż Javascript? JQuery jest świetny, ale jeśli to wszystko, co musisz zrobić - co uzasadnia włączenie całego biblioteki JQuery zamiast kilku wierszy JavaScript?
mattstuehler

23
@mattstuehler 1) wyrażenie „lepiej jeszcze x” często oznacza „lepiej jeszcze (możesz) x”. 2) Aby dotrzeć do sedna sprawy, jQuery ma na celu pomóc w uzyskiwaniu dostępu do DOM i manipulowania nim, i bardzo często, jeśli musisz to zrobić, kiedy będziesz musiał to zrobić wszędzie.
Barry

31
Jeden błąd w tym rozwiązaniu: wielokrotne kliknięcie przycisku spowoduje dodanie klasy „MyClass” do elementu wiele razy, zamiast sprawdzania, czy już istnieje. W ten sposób można uzyskać atrybut klasy HTML wyglądający class="button MyClass MyClass MyClass"
mniej więcej

35
Jeśli próbujesz usunąć klasę „mojaKlasa” i masz klasę „przedrostek-mojaKlasa”, wyrażenie, które podałeś powyżej w celu usunięcia klasy, pozostawi cię z „przedrostkiem-” w twojej klasie Nazwa: O
jinglesthula

16
Wow, trzy lata i 183 entuzjastów i nikt tego nie zauważył. Dzięki jinglesthula, poprawiłem wyrażenie regularne, aby nie usuwało nieprawidłowo części nazw klas. // Myślę, że to dobry przykład tego, dlaczego warto używać frameworka (takiego jak jQuery) - takie błędy są wychwytywane i naprawiane wcześniej i nie wymagają zmian w normalnym kodzie.
Peter Boughton,

422

Możesz także po prostu:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Aby przełączyć klasę (usuń, jeśli istnieje, dodaj ją):

document.getElementById('id').classList.toggle('class');

63
Wierzę, że to zależy od HTML5.
John

12
Będziesz potrzebował classListpodkładki Eli Greya .
ELLIOTTCABLE

15
Mozilla Developer Network oświadcza, że ​​nie działa natywnie w Internet Explorerach poniżej 10. W moim teście stwierdzenie jest prawdziwe. Najwyraźniej podkładka Eli Grey jest wymagana w przeglądarce Internet Explorer 8-9. Niestety nie mogłem go znaleźć na jego stronie (nawet przy wyszukiwaniu). Podkładka dostępna jest pod linkiem Mozilla.
doubleJ


4
atow „classList” ma częściowe wsparcie w IE10 +; brak wsparcia dla Opera Mini; w przeciwnym razie pełne wsparcie w pozostałych standardowych przeglądarkach: caniuse.com/#search=classlist
Nick Humphrey

119

W jednym z moich starych projektów, które nie korzystały z jQuery, zbudowałem następujące funkcje dodawania, usuwania i sprawdzania, czy element ma klasę:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}
function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

Na przykład, jeśli chcę onclickdodać klasę do przycisku, mogę użyć tego:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

Do tej pory na pewno lepiej byłoby użyć jQuery.


8
Jest to świetne, gdy twój klient nie pozwala ci używać jQuery. (Bo prawie budujesz własną bibliotekę.)
Mike

1
@ Mike Jeśli klient nie pozwala ci korzystać z jQuery, czy nie możesz po prostu przejść i przebudować tylko potrzebnych funkcji we własnej bibliotece?
kfrncs,

5
@kfrncs Ponieważ zazwyczaj nie potrzebuję tak dużego frameworka. W projekcie, o którym myślałem, jedynymi potrzebnymi funkcjami były 3 funkcje nazwy klasy (ma, dodaj, usuń) oraz funkcje cookie (ma, dodaj, usuń). Cała reszta była niestandardowa lub natywnie dobrze obsługiwana. Tak więc wszystko razem miało wtedy tylko 150 wierszy, zanim minęło, łącznie z komentarzami.
Mike

2
Koleś, jest czwarta nad ranem i dziękuję bardzo. Vanilla JS jest tym, czego używamy w moim projekcie i to było ratowanie życia.
LessQuesar,

To jest moje ulubione rozwiązanie. Używam go wszędzie. Uważam, że jest to najbardziej elegancki sposób na dodawanie i usuwanie klas, gdy twój projekt nie ma jeszcze innego sposobu na zrobienie tego.
WebWanderer

77

Możesz użyć node.classNametak:

document.getElementById('foo').className = 'bar';

Powinno to działać w IE5.5 i nowszych zgodnie z PPK .


11
zastąpiłoby to wszystkie inne klasy na obiekcie ... więc nie jest to takie proste.
Eric Sebasta,

51

Wow, zaskoczony, że jest tu tak wiele odpowiedzi na pytanie o przesadę ...

<div class="firstClass" onclick="this.className='secondClass'">

14
Powiedziałbym, że dyskretny javascript jest okropną praktyką przy pisaniu przykładowego kodu ...
Gabe

22
Nie zgodziłbym się, ponieważ uważam, że przykładowy kod powinien dawać dobry przykład.
thomasrutter

1
Dobry przykład powinien jednocześnie pouczać i pobudzać wyobraźnię. Nie powinno zastępować myśli, ale inspirować ją.
Anthony Rutledge

4
Pozostałe odpowiedzi nie są przesadne, zachowują także istniejące klasy na elemencie.
gcampbell

47

Używając czystego kodu JavaScript:

function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

33

To działa dla mnie:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Doskonała odpowiedź! Pozostało tylko dodać: Ustaw dla każdej nazwy klasy CSS dla selektora, aby określić styl dla grupy elementów klasy
Roman Polen.

Działa to dla mnie na FF, ale kiedy próbowałem użyć el.className = "newStyle"; nie zadziałało, dlaczego?
Łukasz „Severiaan” Grela

1
Możesz użyć el.setAttribute('class', newClass)lub lepiej el.className = newClass. Ale nie el.setAttribute('className', newClass).
Oriol

20

Równie dobrze możesz rozszerzyć obiekt HTMLElement, aby dodać metody dodawania, usuwania, przełączania i sprawdzania klas ( gist ):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

A następnie użyj tego w następujący sposób (kliknięcie doda lub usunie klasę):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Oto demo .


1
ten jest trochę gadatliwy ... oto bardzo zwięzłe rozwiązanie ... jsfiddle.net/jdniki/UaT3P
zero_cool

5
Przepraszam @Jackson_Sandland, ale całkowicie przegapiłeś punkt, którym w ogóle nie jest używanie jQuery.
moka

17

Aby dodać informacje z innego popularnego środowiska, Google Closures, zobacz ich klasę dom / class:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Jedną z opcji wyboru elementu jest użycie goog.dom.query z selektorem CSS3:

var myElement = goog.dom.query("#MyElement")[0];

14

Kilka drobnych notatek i poprawek do poprzednich wyrażeń regularnych:

Będziesz chciał to zrobić globalnie, jeśli lista klas ma nazwę klasy więcej niż jeden raz. Prawdopodobnie będziesz chciał usunąć spacje z końców listy klas i przekonwertować wiele spacji na jedną spację, aby nie dopuścić do uruchomienia serii spacji. Żadna z tych rzeczy nie powinna stanowić problemu, jeśli jedyny kod migający z nazwami klas używa poniższego wyrażenia regularnego i usuwa nazwę przed jej dodaniem. Ale. Cóż, kto wie, kto może bawić się z listą nazw klas.

W wyrażeniu regularnym nie jest rozróżniana wielkość liter, więc błędy w nazwach klas mogą pojawiać się, zanim kod zostanie użyty w przeglądarce, która nie dba o wielkość liter w nazwach klas.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

13

Zmień klasę CSS elementu za pomocą JavaScript w ASP.NET :

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

13

Chciałbym użyć jQuery i napisać coś takiego:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Ten kod dodaje funkcję, która ma być wywoływana po kliknięciu elementu id jakiś element . Funkcja dołącza kliknięcie do atrybutu klasy elementu, jeśli nie jest już jego częścią, i usuwa go, jeśli już tam jest.

Tak, aby dodać ten kod, musisz dodać odwołanie do biblioteki jQuery na swojej stronie, ale przynajmniej możesz mieć pewność, że większość funkcji w bibliotece będzie działać na prawie wszystkich współczesnych przeglądarkach, a to pozwoli zaoszczędzić czas na wdrożenie własny kod, aby zrobić to samo.

Dzięki


8
Wystarczy napisać jQueryw długiej formie tylko raz. jQuery(function($) { });sprawia, że $dostępne wewnątrz funkcji we wszystkich przypadkach.
ThiefMaster

10

Linia

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

Powinien być:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

8
Błędny. RegEx jest rozdzielany ukośnikami. Dodanie cudzysłowu powoduje awarię w IE, zwracając ciąg klasy, którą próbujesz usunąć, zamiast faktycznie usuwać klasę.
Dylan

9

Zmień klasę elementu w waniliowym JavaScript z obsługą IE6

Możesz spróbować użyć attributeswłaściwości węzła, aby zachować zgodność ze starymi przeglądarkami, nawet IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>


8

Oto moja wersja, w pełni działająca:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Stosowanie:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

4
To zniszczy klasę, foobarjeśli spróbujesz usunąć klasę foo. JS w atrybutach wewnętrznej procedury obsługi zdarzeń został uszkodzony przed edycją. 4-letnia zaakceptowana odpowiedź jest znacznie lepsza.
Quentin

1
dzięki, naprawiłem to (nie problem z prefiksem). to stara zaakceptowana odpowiedź, która ma błąd w wyrażeniu regularnym.
Alfred

Kod nadal ma foobarproblem. Zobacz test tutaj
rosell.dk

8

Oto toggleClass do przełączania / dodawania / usuwania klasy na elemencie:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

widzieć jsfiddle

Zobacz także moją odpowiedź tutaj dotyczącą dynamicznego tworzenia nowej klasy


6

W kodzie używam następujących waniliowych funkcji JavaScript. Używają wyrażeń regularnych i indexOfnie wymagają cytowania znaków specjalnych w wyrażeniach regularnych.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

Możesz także użyć element.classList we współczesnych przeglądarkach.


3

OPCJE.

Oto kilka przykładów stylów w porównaniu z klasami, aby zobaczyć, jakie masz dostępne opcje i jak classListrobić, co chcesz.

style vs. classList

Różnica pomiędzy stylei classListjest to, że ze stylejesteś dodając do właściwości typu elementu, ale classListjest trochę kontrolowanie klasa (-y) elementu ( add, remove, toggle, contain), ja pokaże, jak używać addi removemetody, ponieważ są to popularne.


Przykład stylu

Jeśli chcesz dodać margin-topwłaściwość do elementu, wykonaj następujące czynności:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Przykład classList

Powiedzmy, że mamy <div class="class-a class-b">w tym przypadku mamy 2 lekcje dodania elementu div już, class-ai class-b, i chcemy sterować Jakie klasy removei co do klasy add. To gdzieclassList staje się przydatny.

Usunąć class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Dodaj class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")


1

Pomyślałem, że wrzucę to:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

1

po prostu powiedz, myElement.classList="new-class"chyba że musisz zachować inne istniejące klasy, w którym to przypadku możesz użyć classList.add, .removemetod.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>


1

OK, myślę, że w tym przypadku powinieneś użyć jQuery lub napisać własne metody w czystym javascript, preferuję dodawanie własnych metod zamiast wstrzykiwania całej jQuery do mojej aplikacji, jeśli nie potrzebuję tego z innych powodów.

Chciałbym zrobić coś takiego jak poniżej jako metody do mojego środowiska javascript, aby dodać kilka funkcji, które obsługują dodawanie klas, usuwanie klas itp. Podobnych do jQuery, jest to w pełni obsługiwane w IE9 +, również mój kod jest napisany w ES6, więc potrzebujesz aby upewnić się, że Twoja przeglądarka go obsługuje lub używasz czegoś takiego jak babel, w przeciwnym razie musisz użyć składni ES5 w kodzie, również w ten sposób znajdujemy element za pomocą identyfikatora, co oznacza, że ​​element musi mieć identyfikator do wybrania:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

i możesz po prostu zadzwonić, użyj ich jak poniżej, wyobraź sobie, że twój element ma identyfikator „id” i klasę „class”, upewnij się, że przekazujesz je jako ciąg znaków, możesz użyć Utilities jak poniżej:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

1

classList DOM API:

Bardzo wygodnym sposobem dodawania i usuwania klas jest classListDOM API. Ten interfejs API pozwala nam wybrać wszystkie klasy określonego elementu DOM w celu zmodyfikowania listy za pomocą javascript. Na przykład:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

W dzienniku możemy zaobserwować, że zwracamy obiekt nie tylko klasami elementu, ale także wieloma pomocniczymi metodami i właściwościami. Ten obiekt dziedziczy z interfejsu DOMTokenList , interfejsu używanego w DOM do reprezentowania zestawu tokenów oddzielonych spacjami (jak klasy).

Przykład:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  


1

Tak, jest na to wiele sposobów. W składni ES6 możemy to łatwo osiągnąć. Użyj tego kodu, aby przełączać dodawanie i usuwanie klasy.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>


1
function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

użycie przyjętej powyżej odpowiedzi jest prostą funkcją przeglądarki, aby dodać i usunąć klasę

dodaj klasę:

classed(document.getElementById("denis"), "active", true)

usuń klasę:

classed(document.getElementById("denis"), "active", false)

1

Wiele odpowiedzi, wiele dobrych odpowiedzi.

TL; DR:

document.getElementById('id').className = 'class'

LUB

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Otóż ​​to.

A jeśli naprawdę chcesz wiedzieć, dlaczego i kształcić się, proponuję przeczytać odpowiedź Petera Boughtona , jest idealna.

Uwaga:
Jest to możliwe w przypadku ( dokumentu lub zdarzenia ):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

1

W javascript znajduje się właściwość className, która służy do zmiany nazwy klasy elementu HTML. Istniejąca wartość klasy zostanie zastąpiona nową, którą przypisałeś w className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Kredyt - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html


1

Pytanie OP brzmiało: Jak zmienić klasę elementu za pomocą JavaScript?

Nowoczesne przeglądarki pozwalają to zrobić za pomocą jednej linii javascript :

document.getElementById('id').classList.replace('span1','span2')

classListAtrybut zapewnia DOMTokenList który ma różne metody . Możesz operować na klasie classList elementu, używając prostych manipulacji, takich jak add () , remove () lub replace () . Lub uzyskaj bardzo wyrafinowane i manipuluj klasami, tak jak w przypadku obiektu lub mapy za pomocą klawiszy () , wartości () , wpisów ()

Odpowiedź Petera Boughtona jest świetna, ale ma już ponad dekadę. Wszystkie nowoczesne przeglądarki obsługują teraz DOMTokenList - patrz https://caniuse.com/#search=classList, a nawet IE11 obsługuje niektóre metody DOMTokenList


1

próbować

element.className='second'


-2

Działający kod JavaScript:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Możesz pobrać działający kod z tego linku .


1
Spowoduje to zerwanie elementów z więcej niż jedną klasą.
gcampbell

-4

Oto prosty kod jQuery, aby to zrobić.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Tutaj,

  • Klasa 1 jest detektorem zdarzenia.
  • Klasa nadrzędna to klasa, która obsługuje klasę, którą chcesz zmienić
  • Classtoremove to stara klasa, którą masz.
  • Klasa do dodania to nowa klasa, którą chcesz dodać.
  • 100 to opóźnienie, podczas którego klasa jest zmieniana.

Powodzenia.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.