[html]<button onclick="myFunction()">Переключение класса</button>

<div id="myDIV">
  Нажмите кнопку, чтобы переключить имя класса!
</div>
<style>
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}</style>
<script>
function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.toggle("mystyle");
}</script>
[/html]

Шаг 1) добавить HTML:
Переключение между добавлением имени класса к элементу div с идентификатором = "myDIV" (в данном примере используется кнопка для переключения имени класса).

Код:
<button onclick="myFunction()">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

Шаг 2) добавить CSS:
Добавьте имя класса для переключения:

Код:
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

Шаг 3) добавить JavaScript:
Получите элемент <div> с идентификатором = "myDIV" и Переключитесь между классом "myStyle":

Код:
function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.toggle("mystyle");
}

Кросс-браузерное решение

Примечание: Свойство класслист не поддерживается в обозревателе Internet Explorer 9. В следующем примере используется кросс-браузерное решение/резервный код для IE9

Код:
var element = document.getElementById("myDIV");

if (element.classList) {
    element.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = element.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        element.className = classes.join(" ");
}
Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему