How to change an element's class with JavaScript?

Question

How to change an element's class with JavaScript?

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

3411

javascript html dom

Источник

user4998 12 окт '08 в 20:06

39 ответов

Решение

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

document.getElementById('ID') classList.add('класс').
document.getElementById('ID') classList.remove('класс').

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

. Document.getElementById ('ID') classList.toggle('класс');

487

Источник

user640584 05 авг '11 в 17:44

В одном из моих старых проектов, в которых не использовался 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.

146

Источник

user508601 28 май '11 в 07:32

Ты можешь использовать node.className вот так:

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

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

105

Источник

user25066 12 окт '08 в 20:33

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

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

61

Источник

user1026459 05 янв '12 в 19:14

Используя чистый код 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);
    }
}

61

Источник

user588005 20 сен '11 в 15:26

Возможны 4 действия: Добавить, Удалить, Проверить и Переключить.

Давайте посмотрим еще несколько способов для каждого действия.

1. Добавить курс

Метод 1. Лучший способ добавить класс в современный браузер - использовать classList.add() метод элемента.

Случай 1: добавление одного класса

        function addClass() {
  let element = document.getElementById('id1');

  // adding class
  element.classList.add('beautify');
}

Случай 2: добавление нескольких классов

Чтобы добавить несколько отдельных классов, запятую в add() метод
```
        function addClass() {
  let element = document.getElementById('id1');

  // adding multiple class
  element.classList.add('class1', 'class2', 'class3');
}
```

Метод 2. Вы также можете добавлять классы в HTML-элементы, используя свойство.

Случай 1. Замена ранее существовавших классов. Когда вы назначаете свойству новый класс, он перезаписывает предыдущий класс.
```
        function addClass() {
  let element = document.getElementById('id1');

  // adding multiple class
  element.className = 'beautify';
}
```
Случай 2: Добавление класса без перезаписи Использование +=оператор для класса, чтобы не перезаписывать предыдущие классы. Также добавьте дополнительное пространство перед новым классом.
```
        function addClass() {
  let element = document.getElementById('id1');

  // adding single multiple class
  element.className += ' beautify';
  // adding multiple classes
  element.className += ' class1 class2 class3';
}
```

2. Удалить курс

Метод 1. Лучший способ удалить класс из элемента - classList.remove() метод.

Случай 1: удалить отдельный класс

Просто передайте имя класса, который вы хотите удалить из элемента в методе.
```
        function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.classList.remove('beautify');
}
```

Случай 2: удалить несколько классов

Передайте несколько классов через запятую.

        function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.classList.remove('class1', 'class2', 'class3');
}

Метод 2. Вы также можете удалить класс с помощью метода.

Случай 1. Удаление одного класса. Если элемент имеет только 1 класс и вы хотите его удалить, просто назначьте методу пустую строку.
```
        function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.className = '';
}
```
Случай 2: Удаление нескольких классов. Если у элемента несколько классов, сначала получают все классы из элемента, используя свойство, и используют метод replace, заменяют желаемые классы пустой строкой и, наконец, назначают его элементу] s className имущество.
```
        function removeClass() {
  let element = document.getElementById('id1');

  // removing class
  element.className = element.className.replace('class1', '');
}
```

3. Проверка класса

Чтобы проверить, существует ли класс в элементе, вы можете просто использовать classList.contains()метод. Он возвращается true если класс существует, else возвращает false.

      function checkClass() {
  let element = document.getElementById('id1');

  // checking class
  if(element.contains('beautify') {
      alert('Yes! class exists');
  }
}

4. Переключить класс

Чтобы переключить класс, используйте classList.toggle() метод.

      function toggleClass() {
    let element = document.getElementById('id1');

    // toggle class
    element.toggle('beautify');
}

45

Источник

user9445290 05 сен '21 в 07:50

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

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

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

42

Источник

user1070666 08 дек '11 в 09:36

Также вы можете расширить объект 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');
}

Вот демо.

28

Источник

user1312722 11 апр '13 в 10:13

Просто чтобы добавить информацию из другой популярной среды, 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];

25

Источник

user449161 26 ноя '11 в 21:04

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

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

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

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, ' ') + "]");

21

Источник

user972805 02 май '12 в 04:59

Измените класс 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

21

Источник

user774111 28 май '11 в 07:19

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

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

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

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

Спасибо

18

Источник

user557761 05 май '12 в 02:46

Линия

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

должно быть:

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

18

Источник

user227530 08 дек '09 в 22:15

Изменить класс элемента в обычном 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>

16

Источник

user2676500 04 ноя '15 в 17:57

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

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")' >

13

Источник

user345517 17 окт '12 в 12:21

Вот 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

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

12

Источник

user460084 28 окт '15 в 07:00

Я использую следующие ванильные функции 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 в современных браузерах.

10

Источник

user87015 18 янв '14 в 09:28

Вопрос OP: как изменить класс элемента с помощью JavaScript?

Современные браузеры позволяют делать это с помощью одной строчки javascript:

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

В classListАтрибут предоставляет DOMTokenList, у которого есть множество методов. Вы можете работать со списком классов элемента, используя простые манипуляции, такие как add(), remove() или replace (). Или станьте очень изощренным и управляйте классами, как объект или карту с ключами (), значениями (), записями ()

Ответ Питера Боутона отличный, но ему уже больше десяти лет. Все современные браузеры теперь поддерживают DOMTokenList - см. https://caniuse.com/, и даже IE11 поддерживает некоторые методы DOMTokenList.

7

Источник

user127660 04 май '20 в 02:05

ВАРИАНТЫ.

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

`style` vs. `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">, в этом случае мы уже добавили 2 класса к нашему элементу div, class-a а также class-b, и мы хотим контролировать, какие классы remove и какой класс 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")

6

Источник

user2556515 22 авг '19 в 21:28

Для IE v6-9 (в котором classList не поддерживается, и вы не хотите использовать полифиллы):

      var elem = document.getElementById('some-id');

// don't forget the extra space before the class name
var classList = elem.getAttribute('class') + ' other-class-name';

elem.setAttribute('class', classList);

5

Источник

user7347433 10 сен '21 в 14:57

Пытаться

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>

5

Источник

user860099 14 апр '19 в 10:51

Хорошо, я думаю, что в этом случае вы должны использовать 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');

4

Источник

user5423108 29 май '17 в 13:29

`classList` DOM API:

Очень удобным способом добавления и удаления классов является classList DOM API. Этот 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>

3

Источник

user8059459 21 сен '18 в 09:23

Да, есть много способов сделать это. В синтаксисе 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>

3

Источник

user4619794 06 фев '19 в 14:02

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

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

Источник

user2438423 20 мар '15 в 02:35

Проще говоря, с элементом можно выполнить 3 различных действия:

Добавить новый курс
Удалить старый класс
Переключить класс (если класс, удалите его; если класс нет, добавьте)

Но здесь вас интересует только добавление нового класса и удаление старых.

Сделать это можно двумя способами:

Использование метода добавления и удаления свойства classList элемента . element.classList.add(class_name) с element.classList.remove(old_class_name). Он добавит новый класс и удалит старый.

Полный код

2

Источник

user9445290 26 мар '21 в 16:43

В 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

2

Источник

user12257880 20 мар '20 в 15:25

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)

2

Источник

user7733202 04 сен '19 в 18:32

Просто скажи 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>

2

Источник

user4797603 21 апр '17 в 02:50

Другие вопросы по тегам javascript html dom

user9360 12 окт '08 в 20:45 2008-10-12 20:45 · Accepted Answer · 2008-10-12 20:45

Современные методы HTML5 для изменения классов

Современные браузеры добавили classList, который предоставляет методы, облегчающие манипулирование классами без необходимости в библиотеке:

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

К сожалению, они не работают в Internet Explorer до v10, хотя есть некоторая поддержка, чтобы добавить поддержку для IE8 и IE9, доступную на этой странице. Это, однако, становится все более и более поддерживаемым.

Простое кросс-браузерное решение

Стандартный способ JavaScript для выбора элемента использует document.getElementById("Id") Это то, что используют следующие примеры - вы, конечно, можете получить элементы другими способами, а в правильной ситуации можете просто использовать this вместо этого - однако, вдаваясь в подробности, это выходит за рамки ответа.

Чтобы изменить все классы для элемента:

Чтобы заменить все существующие классы одним или несколькими новыми классами, установите атрибут className:

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

(Вы можете использовать разделенный пробелами список для применения нескольких классов.)

Чтобы добавить дополнительный класс к элементу:

Чтобы добавить класс к элементу, не удаляя / не затрагивая существующие значения, добавьте пробел и новое имя класса, например, так:

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

Чтобы удалить класс из элемента:

Чтобы удалить отдельный класс для элемента, не затрагивая другие потенциальные классы, требуется простая замена регулярного выражения:

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

Объяснение этого регулярного выражения следующее:

(?:^|\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)

g флаг указывает замене повторять при необходимости, если имя класса было добавлено несколько раз.

Чтобы проверить, применяется ли класс к элементу:

Тот же самый regex, использованный выше для удаления класса, может также использоваться как проверка того, существует ли определенный класс:

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

Назначение этих действий событиям onclick:

Хотя возможно написать JavaScript непосредственно внутри атрибутов событий HTML (таких как onclick="this.className+=' MyClass'") это не рекомендуемое поведение. Особенно в больших приложениях, более поддерживаемый код достигается путем отделения разметки HTML от логики взаимодействия JavaScript.

Первым шагом к достижению этого является создание функции и вызов функции в атрибуте onclick, например:

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

_{(Не обязательно иметь этот код в тегах скрипта, это просто для краткости примера, и более подходящим может быть включение JavaScript в отдельный файл.)}

Второй шаг - переместить событие onclick из HTML в JavaScript, например, используя 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>

(Обратите внимание, что часть window.onload необходима для того, чтобы содержимое этой функции выполнялось после завершения загрузки HTML - без этого MyElement может не существовать при вызове кода JavaScript, так что строка не будет работать.)

Фреймворки и библиотеки JavaScript

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

Хотя некоторые люди считают излишним добавлять среду ~50 КБ для простого изменения класса, если вы выполняете какой-либо значительный объем работы с JavaScript или что-то, что может иметь необычное поведение в разных браузерах, это стоит рассмотреть.

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

Приведенные выше примеры были воспроизведены ниже с использованием jQuery, вероятно, наиболее часто используемой библиотеки JavaScript (хотя есть и другие, заслуживающие изучения).

(Обратите внимание, что $ вот объект jQuery.)

Изменение классов с помощью jQuery:

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

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

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

Кроме того, jQuery предоставляет ярлык для добавления класса, если он не применяется, или удаления класса, который делает:

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

Назначение функции событию click с помощью jQuery:

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

или без идентификатора:

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

How to change an element's class with JavaScript?

39 ответов

Современные методы HTML5 для изменения классов

Простое кросс-браузерное решение

Чтобы изменить все классы для элемента:

Чтобы добавить дополнительный класс к элементу:

Чтобы удалить класс из элемента:

Чтобы проверить, применяется ли класс к элементу:

Назначение этих действий событиям onclick:

Фреймворки и библиотеки JavaScript

Изменение классов с помощью jQuery:

Назначение функции событию click с помощью jQuery:

Возможны 4 действия: Добавить, Удалить, Проверить и Переключить.

1. Добавить курс

2. Удалить курс

3. Проверка класса

4. Переключить класс

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

ВАРИАНТЫ.

style vs. classList

Пример стиля

classList Пример

Удалить class-b

добавлять class-c

classList DOM API:

Пример:

`style` vs. `classList`

Удалить `class-b`

добавлять `class-c`

`classList` DOM API: