Как я могу изменить класс элемента HTML в ответ на событие onclick, используя JavaScript?

2923
Nathan Smith 13 Окт 2008 в 00:06

30 ответов

Рабочий код 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>

Вы можете загрузить рабочий код по этой ссылке,

-1
Peter Mortensen 22 Ноя 2016 в 22:25

Пытаться

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>
0
Kamil Kiełczewski 14 Апр 2019 в 10:58

Да, есть много способов сделать это. В синтаксисе ES6 мы можем легко достичь. Используйте этот код для переключения добавления и удаления класса.

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>
0
Danish Khan 6 Фев 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, '');
}

С помощью принятого ответа выше здесь простая кросс-браузерная функция для добавления и удаления класса

Добавить класс:

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

Удалить класс:

classed(document.getElementById("denis"), "active", false)
0
donatso 4 Сен 2019 в 15:32

Вот моя версия, полностью работающая:

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
}

Использование:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >
8
Peter Mortensen 6 Янв 2013 в 18:20

Пара небольших заметок и изменений в предыдущих регулярных выражениях:

Вы захотите сделать это глобально, если список классов имеет имя класса более одного раза. И вы, вероятно, захотите убрать пробелы из концов списка классов и преобразовать несколько пробелов в один пробел, чтобы избежать получения пробелов. Ничто из этого не должно быть проблемой, если единственный код, помеченный именами классов, использует приведенное ниже регулярное выражение и удаляет имя перед его добавлением. Но. Ну, кто знает, кто может пить из списка имен классов.

Это регулярное выражение не учитывает регистр, поэтому ошибки в именах классов могут отображаться до того, как код будет использован в браузере, который не заботится о регистре в именах классов.

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
Peter Mortensen 22 Ноя 2016 в 22:23

В javascript есть свойство className для изменения имени класса HTML-элемента. Существующее значение класса будет заменено новым значением, которое вы назначили в 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>

Кредит - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

1
Jai Prakash 20 Мар 2020 в 12:25

Используя чистый код 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);
    }
}
47
Peter Mortensen 11 Июн 2012 в 15:59

В одном из моих старых проектов, в которых не использовался jQuery, я построил следующие функции для добавления, удаления и проверки наличия элемента:

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, ' ');
    }
}

Так, например, если я хочу onclick добавить некоторый класс к кнопке, я могу использовать это:

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

К настоящему времени наверняка было бы лучше использовать jQuery.

115
Wyck 6 Авг 2019 в 13:00

Без обид, но неуместно менять класс на лету, так как он заставляет интерпретатор CSS пересчитывать визуальное представление всей веб-страницы.

Причина в том, что интерпретатору CSS практически невозможно узнать, можно ли изменить какое-либо наследование или каскадирование, поэтому короткий ответ таков:

Никогда не меняйте className на лету! -)

Но обычно вам нужно всего лишь изменить свойство или два, и это легко реализовать:

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

Это проще всего с такой библиотекой, как jQuery:

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>
-23
Jon Galloway 12 Окт 2008 в 20:12

Я использую следующие ванильные функции JavaScript в моем коде. Они используют регулярные выражения и indexOf, но не требуют кавычек специальных символов в регулярных выражениях.

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, "");
    }
}

Вы также можете использовать element.classList в современных браузерах.

5
Salman A 18 Янв 2014 в 09:37

Вы можете использовать node.className примерно так:

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

Это должно работать в IE5.5 и выше в соответствии с PPK.

76
Eric Wendelin 22 Авг 2012 в 00:32

Я бы использовал jQuery и написал бы что-то вроде этого:

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

Этот код добавляет функцию, вызываемую при нажатии на элемент id some-element . Функция добавляет clicked к атрибуту класса элемента, если он еще не является его частью, и удаляет его, если он там есть.

Да, вам нужно добавить ссылку на библиотеку jQuery на своей странице, чтобы использовать этот код, но, по крайней мере, вы можете быть уверены, что большинство функций в библиотеке будут работать практически во всех современных браузерах, и это сэкономит ваше время на реализацию ваш собственный код, чтобы сделать то же самое.

Спасибо

12
shingokko 25 Окт 2013 в 02:50

Вы также можете просто сделать:

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

И переключить класс (удалить, если существует, добавить его):

document.getElementById('id').classList.toggle('class');
413
johannchopin 4 Апр 2020 в 19:27

Линия

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

Должно быть:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');
10
Peter Mortensen 24 Май 2011 в 16:39

Ух ты, удивляешься, что здесь так много ответов ...

<div class="firstClass" onclick="this.className='secondClass'">
49
Travis J 19 Окт 2014 в 23:47

Вот toggleClass для переключения / добавления / удаления класса в элементе:

// 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;
}

См. jsfiddle

См. также мой ответ здесь для динамического создания нового класса

7
Community 23 Май 2017 в 12:34

Много ответов, много хороших ответов.

TL; DR:

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

< EM> ИЛИ

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

Вот и все.

И, если вы действительно хотите знать, почему и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона, это прекрасно.

< Сильный > Примечание :
Это возможно с ( документом или событие ) :

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()
0
J. Scott Elblein 17 Окт 2019 в 22:18

Изменить класс элемента в обычном JavaScript с поддержкой IE6

Вы можете попробовать использовать свойство узла attributes, чтобы сохранить совместимость со старыми браузерами, даже 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>
7
Eugene Tiurin 7 Янв 2016 в 18:46

Вот простой код jQuery для этого.

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

Вот,

  • Class1 - слушатель события.
  • Родительский класс - это класс, в котором находится класс, который вы хотите изменить.
  • Classtoremove - это старый класс, который у вас есть.
  • Класс для добавления - это новый класс, который вы хотите добавить.
  • 100 - задержка тайм-аута, в течение которой изменяется класс.

Удачи.

-4
Peter Mortensen 19 Июл 2014 в 13:58

Также вы можете расширить объект HTMLElement, чтобы добавлять методы для добавления, удаления, переключения и проверки классов ( 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);
}

А затем просто используйте вот так (по клику добавит или удалит класс):

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

Вот демонстрационная версия.

19
moka 11 Апр 2013 в 10:13

Хорошо, я думаю, что в этом случае вы должны использовать jQuery или написать свои собственные методы на чистом javascript, я предпочитаю добавлять свои собственные методы, а не вставлять все jQuery в мое приложение, если мне это не нужно по другим причинам.

Я хотел бы сделать что-то похожее на приведенное ниже в качестве методов в моей инфраструктуре javascript, чтобы добавить несколько функций, которые обрабатывают добавление классов, удаление классов и т. Д., Аналогично jQuery, это полностью поддерживается в IE9 +, также мой код написан на ES6, поэтому вам нужно чтобы убедиться, что ваш браузер поддерживает его или вы используете что-то вроде babel, в противном случае необходимо использовать синтаксис ES5 в вашем коде, также таким образом мы находим элемент через идентификатор, что означает, что элемент должен иметь идентификатор, который будет выбран:

//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);
  }

}

И вы можете просто вызвать использование их, как показано ниже, представьте, что ваш элемент имеет идентификатор «id» и класс «class», убедитесь, что вы передаете их как строку, вы можете использовать утилиту, как показано ниже:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');
0
Alireza 24 Июн 2017 в 03:57

Просто подумал, что я добавлю это:

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(' ');
}
0
StackSlave 20 Мар 2015 в 02:35

Изменить класс CSS элемента с помощью JavaScript в 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
Peter Mortensen 6 Янв 2013 в 18:17

Просто для добавления информации из другой популярной среды, Google Closures, посмотрите их dom / classes. учебный класс:

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

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

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

Одним из вариантов выбора элемента является использование goog.dom.query с селектором CSS3:

var myElement = goog.dom.query("#MyElement")[0];
17
Ben Flynn 26 Ноя 2011 в 21:04

Это работает для меня:

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

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}
33
Peter Mortensen 11 Июн 2012 в 16:01

ВАРИАНТЫ.

Вот несколько примеров стилей и классов, которые помогут вам увидеть, какие опции у вас есть, и как использовать classList, чтобы делать то, что вы хотите.

style против classList

Разница между style и classList заключается в том, что с style вы добавляете в свойства стиля элемента, но classList вроде как контролирует класс (ы) элемент (add, remove, toggle, contain), я покажу вам, как использовать методы add и remove, так как они популярные.


Пример стиля

Если вы хотите добавить свойство margin-top в элемент, вы должны сделать следующее:

// 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.

Пример classList

Допустим, у нас есть <div class="class-a class-b">, в этом случае к нашему элементу div уже добавлено 2 класса, class-a и class-b, и мы хотим контролировать, какие классы {{ X3}} и какой класс add . Это где classList становится удобным.

Удалить class-b

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

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

Добавить class-c

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

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


2
Farhad 22 Авг 2019 в 18:28

classList API DOM:

Очень удобным способом добавления и удаления классов является DOM API classList. Этот API позволяет нам выбирать все классы определенного элемента DOM, чтобы изменить список, используя JavaScript. Например:

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

В журнале мы можем наблюдать, что мы возвращаем объект не только с классами элемента, но также со многими вспомогательными методами и свойствами. Этот объект наследует от интерфейса DOMTokenList , интерфейса, который используется в DOM для представления набора разделенных пробелами токенов (например, классов).

Примере:

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>
  
0
Willem van der Veen 21 Сен 2018 в 09:23

Просто говорите myElement.classList="new-class", если вам не нужно поддерживать другие существующие классы, в этом случае вы можете использовать методы 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>
0
Ronnie Royston 21 Апр 2017 в 02:50