Если вы хотите добавить класс к элементу HTML, не заменяя его существующий класс, вы можете сделать, как показано в следующем примере:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Class to an Element Using JavaScript</title>
<style>
    .content{
        padding: 20px;
        border: 2px solid #ccc;
    }
    .highlight{
        background: yellow;
    }
</style>
</head>
<body>
    <div class="content" id="myDiv">
        <p>This is a paragraph of text.</p>
        <button type="button" onclick="addNewClass();">Add Class</button>
    </div>
    
    <script>
    function addNewClass(){
        // Выбераем элемент div по его атрибуту id
        var elem = document.getElementById("myDiv");
        elem.className += " highlight";
    }
    </script>
</body>
</html>

В приведенном выше примере функция addNewClass() добавляет нового класс highlight к элементу DIV, у которого уже есть класс box, без его удаления или замены с помощью свойства className.

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

<div class="alert info" id="myDiv">Important piece of information!</div>
 
 <script>
 // Выбор элемента
 var elem = document.getElementById("myDiv");     
 elem.classList.add("highlight");  // Добавляем класс highlight
 elem.classList.remove("alert");  // Удаляем класс alert
 </script>

Свойство classList поддерживается во всех современных браузерах. Не поддерживается в IE до версии 10.

Читайте также

Похожие посты

How to increase and decrease image size using JavaScript

Answer: Use the JavaScript width и height property You can use either width or height JavaScript property to proportionally increase и decrease the dimension of an image like zoom-in и zoom-out feature. Let’s take a look at the following example to understи how it basically works: Пример <!DOCTYPE html> <html lang=»en»> <head> <meta charset=»utf-8″> <title>JavaScript…

Как сделать паузу при выполнении скрипта в JavaScript

Вы можете просто использовать метод setTimeout(), чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды). Давайте посмотрим следующий пример, чтобы понять, как это работает: Как вы заметили в предыдущем примере, JS-код после метода setTimeout() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все…

Как перебрать массив в JavaScript

Самый простой способ перебрать массив в JavaScript — использовать цикл for. В следующем примере показано, как вывести все значения массива в JavaScript по очереди. В качестве альтернативы вы можете использовать недавно представленный цикл for-of в ES6 для итерации по массиву, например: См. Руководство по ES6-функциям JavaScript, чтобы узнать о новых функциях, представленных в ES6.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.