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

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

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

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

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

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

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

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

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

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

использование чистого кода 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);
    }
}

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

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

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

также вы можете расширить объект HTMLElement, чтобы добавить методы для добавления, удаления, переключения и проверки классов (суть):

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

здесь демо.

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

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

пара незначительных нот и настроек на предыдущих регулярных выражениях:

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

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

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

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

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

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

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

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

спасибо

строку

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

должно быть:

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

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

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

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

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

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

вы можете попробовать использовать node 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>

Я использую следующие функции JavaScript vanilla в своем коде. Они используют регулярные выражения и 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, "");
    }
}

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

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

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

просто сказать 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>

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

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

//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", убедитесь, что вы передаете их как строку, вы можете использовать util, как показано ниже:

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

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>
  

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

вы можете скачать рабочий код от этой ссылке.

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

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

здесь

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

Удачи.

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

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

<script>
function test_byid()
{
    $("#second").toggleClass("highlight");
}
</script>

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

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

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

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

function highlight(elm){
    elm.style.backgroundColor ="#345";
    elm.style.color = "#fff";
}