JavaScript Добавить класс к элементу

В этом руководстве будет обсуждаться добавление класса к заданному элементу с помощью свойства classList в JavaScript.

Добавить класс к заданному элементу с помощью свойства classList в JavaScript

Если вы хотите добавить класс к заданному элементу в JavaScript, вы можете использовать свойство classList. Во-первых, вам нужно получить данный элемент, и самый простой способ сделать это - получить его, используя его id. Предположим, что элементу не присвоен id; в этом случае вы можете присвоить ему уникальный id, получить элемент с помощью свойства getElementById в JavaScript и сохранить его в переменной. После этого вы можете использовать переменную для изменения ее свойства с помощью свойства classList. Например, давайте изменим класс текста с помощью кнопки. См. Код ниже.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .newclass {
          width: 90%;
          padding: 30px;
          background-color: red;
          color: yellow;
          font-size: 30px;
}
</style>
<body>
    <button onclick="myFun()">Try it</button>
    <div id="test">
        Adding Class Test
    </div>
    <script type="text/javascript">
        function myFun() {
          var ob = document.getElementById("test");
          ob.classList.add("newclass");
}
    </script>
</body>
</html>

В приведенном выше коде у нас есть тег стиля, в котором мы устанавливаем свойства объекта класса; внутри тега body у нас есть кнопка и некоторый текст, а внутри тега скрипта мы меняем класс текста, используя его id. В этом примере таблица стилей и код JavaScript помещаются в один файл HTML, но вы также можете поместить их в отдельные файлы и связать их с файлом HTML. Чтобы запустить приведенный выше код, вам необходимо скопировать код в файл HTML и открыть его в браузере.

Выход:

Добавление класса в JavaScript с использованием свойства classList

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

Вывод при нажатии кнопки:

Добавление класса в JavaScript с помощью кнопки

Как вы можете видеть на выходе, форма текста изменилась из-за изменения класса. В этом примере мы используем кнопку для изменения класса элемента, но вы можете изменить условие, при котором вы хотите изменить класс данного элемента. Вы не можете использовать свойство classList в Internet Explorer 9. Вместо этого вы можете использовать оператор +=, чтобы добавить свойство к заданному элементу. Вы должны изменить последнюю строку функции myFun внутри тега скрипта на следующую строку.

ob.className += " newclass";

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