Как изменить класс элемента с помощью JavaScript?

Question

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

Здесь

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

Удачи.

Answer 5

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

TL; DR:

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

OR

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

Вот и все.

И, если вы действительно хотите знать причину и обучать себя, тогда я предлагаю прочитать ответ Питера Боутона, он идеален:
https://stackoverflow.com/a/196038/1804013

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

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

Answer 6

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

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

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

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

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

Answer 7

1001 * попробовать *

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>

Answer 8

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

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

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