Jak mogę zmienić klasę elementu HTML w odpowiedzi na zdarzenie {x0}} za pomocą JavaScript?

3044
Nathan Smith 13 październik 2008, 00:06

29 odpowiedzi

Jest to najłatwiejsza z biblioteką jak jQuery:

<input type="button" onClick="javascript:test_byid();" value="id='second'" />

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-23
Jon Galloway 12 październik 2008, 20:12

Brak przestępstwa, ale to jest wózek, aby zmienić klasę w locie, gdyż zmusza tłumacza CSS do ponownego obliczenia wizualnej prezentacji całej strony internetowej.

Powodem jest to, że interpreter CSS jest prawie niemożliwe, aby dowiedzieć się, czy jakikolwiek spadek lub kaskadowy można zmienić, więc krótka odpowiedź brzmi:

Nigdy nie zmieniaj nazwę klasy na lotach! -)

Ale zwykle musisz tylko zmienić nieruchomość lub dwie, a to jest łatwo wdrożone:

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}
-60
Peter Mortensen 24 maj 2011, 16:40

Możesz także zrobić:

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

I przełączanie klasy (usuń, jeśli istnieje inna dodać go):

document.getElementById('id').classList.toggle('class');
437
johannchopin 4 kwiecień 2020, 19:27

W jednym z moich starych projektów, które nie wykorzystały jQuery, zbudowałem następujące funkcje do 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, ' ');
    }
}

Tak więc, na przykład, jeśli chcę onclick, aby dodać trochę klasy do przycisku, którego mogę użyć:

<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 lepiej byłoby lepiej użyć jQuery.

125
Wyck 6 sierpień 2019, 13:00

Możesz użyć node.className jak więc:

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

Powinno to działać w IE5.5 i up zgodnie z ppk.

81
Eric Wendelin 22 sierpień 2012, 00:32

Wow, zaskoczony jest tu tak wiele odpowiedzi tutaj ...

<div class="firstClass" onclick="this.className='secondClass'">
54
Travis J 19 październik 2014, 23:47

Korzystanie z 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);
    }
}
50
Peter Mortensen 11 czerwiec 2012, 15:59

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");
}
35
Peter Mortensen 11 czerwiec 2012, 16:01

Jak również można rozszerzyć obiekt HTMLELEMEMENT, aby dodać metody, aby dodać, usunąć, przełączyć i sprawdzić klasy ( 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 wystarczy użyć takiej (na kliknięciu zostanie dodany lub usunąć klasę):

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

Oto DEMO.

23
moka 11 kwiecień 2013, 10:13

Aby dodać informacje z innych popularnych ram, zamknięć Google, zobacz ich dom / klas klasa:

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żywanie goog.dom.Query z selektorem CSS3:

var myElement = goog.dom.query("#MyElement")[0];
19
Ben Flynn 26 listopad 2011, 21:04

Kilka drobnych notatek i poprawek na poprzedniej regexes:

Będziesz chciał to zrobić na całym świecie w przypadku, gdy lista klasy ma nazwę klasy więcej niż raz. I prawdopodobnie będziesz chciał pasować do spacji z końców listy klas i przekonwertować wiele spacji do jednej przestrzeni, aby stawić czoła biegom przestrzeni. Żadna z tych rzeczy nie powinna być problemem, jeśli jedyny kod dzwoni z nazwami klas używa poniższego regexa i usuwa nazwę przed dodaniem go. Ale. Cóż, kto wie, kto może być dyknącym z listą Nazwa klasy.

Ten regex jest niewrażliwy na przypadek, dzięki czemu błędów w nazwach klas może pojawić się przed użyciem kodu w przeglądarce, która nie dba o przypadek 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, ' ') + "]");
16
Peter Mortensen 22 listopad 2016, 22:23

Używałbym jQuery i napiszę coś takiego:

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

Kod ten dodaje funkcję, która ma zostać wywołana, gdy kliknął element elementu ID Element . Funkcja dołącza kliknięte do atrybutu klasy elementu, jeśli nie jest już jej częścią, i usuwa, jeśli tam jest.

Tak, musisz dodać odniesienie do biblioteki jQuery na swojej stronie, aby użyć tego kodu, ale przynajmniej możesz czuć się pewnie, że większość funkcji w bibliotece działałaby na prawie wszystkich nowoczesnych przeglądarkach, a zaoszczędzi Ci czas wdrażania własny kod, aby zrobić to samo.

Dzięki

14
shingokko 25 październik 2013, 02:50

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/','');
12
Peter Mortensen 24 maj 2011, 16:39

Zmień klasę elementu w wanilii JavaScript z IE6 Support

Możesz spróbować użyć właściwości węzła attributes, aby zachować kompatybilność 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>
11
Eugene Tiurin 7 styczeń 2016, 18:46

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")' >
9
Peter Mortensen 6 styczeń 2013, 18:20

Oto ToggleClass, aby przełączyć / dodać / usunąć klasę 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;
}

Zobacz JSFiddle

Zobacz także moją odpowiedź Tutaj do tworzenia nowej klasy dynamicznie

9
Community 23 maj 2017, 12:34

Używam następujących funkcji wanilii JavaScript w moim kodzie. Używają wyrażeń regularnych i indexOf, ale nie 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 w nowoczesnych przeglądarkach.

8
Salman A 18 styczeń 2014, 09:37

OPCJE.

Oto mały styl vs. Listy klasy, aby dostać się do zobaczenia, jakie są opcje, które masz dostępne i jak używać classList, aby zrobić to, co chcesz.

style vs. {X1}}

Różnica między style a classList jest to, że z style dodajesz do właściwości stylu elementu, ale {x3}} jest szybka kontrolowanie klasy (es) element (add, remove, toggle, contain), pokażę Ci, jak używać metody {x8}} i remove, ponieważ są popularni.


Przykład stylu.

Jeśli chcesz dodać nieruchomość margin-top do elementu, zrobiłbyś w takim miejscu:

// 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 listy klasy

Niech powiedziecie, mamy <div class="class-a class-b">, w tym przypadku mamy już 2 klasy dodane do naszego elementu DIV już, class-a i class-b i chcemy kontrolować jakie klasy {{{ X3}} i jaką klasę {x4}} . To jest miejsce, w którym stanie się przydatny classList.

Usuń 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")


4
Community 20 czerwiec 2020, 09:12

Właśnie pomyślałem, że to wrzucę:

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(' ');
}
2
StackSlave 20 marzec 2015, 02:35

Po prostu powiedzmy myElement.classList="new-class", chyba że musisz zachować inne istniejące klasy, w którym to przypadku można użyć metod classList.add, .remove.

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>
2
Ronnie Royston 21 kwiecień 2017, 02:50

OK, myślę, że w tym przypadku powinieneś użyć jQuery lub napisać własne metody w czystym javascript, moje preferencje jest dodawać własne metody, a nie wstrzykiwanie wszystkich jQuery do mojej aplikacji, jeśli nie potrzebuję tego z innych powodów.

Chciałbym zrobić coś takiego jak metody, jak metody mojej JavaScript Framework, aby dodać niewiele funkcjonalności, które obsługują dodatkowe klasy, usuwanie klas itp. Podobnie jak 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 obsługuje go lub używasz czegoś takiego jak Babel, w przeciwnym razie konieczne jest użycie składni ES5 w kodzie, także w ten sposób, znajdziemy element za pomocą ID, co oznacza, że element musi mieć identyfikator, który ma zostać wybrany:

//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 klasy "klasy", upewnij się, że przekazujesz je jako łańcuch, możesz użyć UTIL, jak poniżej:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
2
Alireza 24 czerwiec 2017, 03:57

classList DOM API:

Bardzo wygodny sposób dodawania i usuwania klas jest API classList DOM. Ten interfejs API pozwala nam wybrać wszystkie klasy konkretnego elementu Domu, aby zmodyfikować listę przy użyciu JavaScript. Na przykład:

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

Możemy obserwować w dzienniku, który odzyskujemy obiekt z nie tylko klasami elementu, ale także wiele metod i właściwości pomocniczych. Obiekt ten dziedziczy z interfejsu Dominokokenlist , interfejs, który jest używany w DOM, aby reprezentować zestaw kosmicznych żetonów oddzielonych (jak klas).

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>
  
2
Willem van der Veen 21 wrzesień 2018, 09:23

Tak, jest wiele sposobów, aby to zrobić. W składni ES6 możemy łatwo osiągnąć. Użyj tego kodu przełączania Dodaj i usuń klasę.

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>
2
Danish Khan 6 luty 2019, 14:02
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, '');
}

Korzystanie z przyjętej odpowiedzi powyżej jest prosta funkcja przeglądarki do dodawania i usuwania klasy

Dodaj klasę:

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

Usuń klasę:

classed(document.getElementById("denis"), "active", false)
2
donatso 4 wrzesień 2019, 15:32

Próbować

function change(el) { el.className='second' }
.first { width: 50px; height: 50px; background: blue }
.second { width: 150px; height: 150px; background: red; transition: all 0.3s ease-in }
<button  onclick="change(box)">Click me</button>
<div id="box" class="first"></div>
2
Kamil Kiełczewski 8 maj 2020, 08:55

Pracują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ć kod roboczy z Ten link.

-1
Peter Mortensen 22 listopad 2016, 22:25

Oto prosty kod jQuery, aby to zrobić.

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

Tutaj,

  • Class1 jest słuchaczym dla wydarzenia.
  • Klasa nadrzędna to klasa, która organizuje klasę, którą chcesz zmienić
  • Classtoremove jest starą klasą, którą masz.
  • Klasa do dodania jest nowa klasa, którą chcesz dodać.
  • 100 to opóźnienie limitu czasu, w którym klasa zmienia się.

Powodzenia.

-3
Peter Mortensen 19 lipiec 2014, 13:58

Istnieje właściwość nazwa klasy w JavaScript, aby zmienić nazwę klasy elementu HTML. Istniejąca wartość klasy zostanie zastąpiona nową, którą przydzielono w nazwie klasy.

<!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-klang/how-to-change-class-name-of-an-html-Element-in-javascript.html.

2
Jai Prakash 20 marzec 2020, 12:25

Zmień klasę CSS Element z 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
15
Peter Mortensen 6 styczeń 2013, 18:17