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

Согласно книге, которую я читаю, лучше изменить css, по классу, когда вы используете Javascript для изменения css. Но как? Может ли кто-нибудь дать образец фрагмента для этого?

Ответ 1

Предположим, что у вас есть:

<div id="mydiv" class="oldclass">text</div>

и следующие стили:

.oldclass { color: blue }
.newclass { background-color: yellow }

Вы можете изменить класс на mydiv в javascript следующим образом:

document.getElementById('mydiv').className = 'newclass';

После манипуляции с DOM вы останетесь с:

<div id="mydiv" class="newclass">text</div>

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

document.getElementById('mydiv').className += ' newClass';

Это приведет к:

<div id="mydiv" class="oldclass newclass">text</div>

Ответ 2

Я очень рекомендую jQuery. Затем он становится таким простым, как:

$('#mydiv').addClass('newclass');

Вам не нужно беспокоиться об удалении старого класса, тогда как addClass() будет только добавляться к нему. У вас также есть removeClass();

Другим преимуществом над методом getElementById() является то, что вы можете применить его к нескольким элементам одновременно с одной строкой кода.

$('div').addClass('newclass');
$('.oldclass').addClass('newclass');

Первый пример добавит класс ко всем элементам DIV на странице. Второй пример добавит новый класс ко всем элементам, которые в настоящее время имеют старый класс.

Ответ 3

Так как classList поддерживается во всех основных браузерах и jQuery снижает поддержку IE < 9 (в ветке 2.x как точки Stormblack в комментарии), учитывая этот HTML

<div id="mydiv" class="oldclass">text</div>

вы можете с комфортом использовать этот синтаксис:

document.getElementById('mydiv').classList.add("newClass");

Это также приведет к:

<div id="mydiv" class="oldclass newclass">text</div>

плюс вы также можете использовать remove, toggle, содержит методы.

Ответ 4

используйте свойство className:

document.getElementById('your_element_s_id').className = 'cssClass';

Ответ 5

document.getElementById("my").className = 'myclass';

Ответ 6

Есть два способа, которыми это можно выполнить с помощью vanilla javascript. Первый - className, а второй - classList. className работает во всех браузерах, но может быть неудобным для работы при изменении атрибута класса элемента. classList - это более простой способ изменить класс элемента.

Чтобы прямо установить атрибут класса элемента, className - это путь, в противном случае для изменения класса (-ов) элемента проще использовать classList.

Начальный HTML

<div id="ID"></div>

Настройка атрибута class

var div = document.getElementById('ID');
div.className = "foo bar car";

Результат:

<div id="ID" class="foo bar car"></div>

Добавление класса

div.classList.add("car");// Class already exists, nothing happens
div.classList.add("tar");

Примечание. Нет необходимости проверять, существует ли класс перед его добавлением. Если нужно добавить класс, просто добавьте его. Если он уже существует, дубликат не будет добавлен.
Результат:

<div id="ID" class="foo bar car tar"></div>

Удаление класса

div.classList.remove("car");
div.classList.remove("tar");
div.classList.remove("car");// No class of this name exists, nothing happens

Примечание. Также как add, если нужно удалить класс, удалите его. Если он там, он будет удален, иначе ничего не произойдет.
Результат:

<div id="ID" class="foo bar"></div>

Проверяя, содержит ли атрибут класса определенный класс

if (div.classList.contains("foo")) {
  // Do stuff
}

Переключение класса

var classWasAdded = div.classList.toggle("bar"); // "bar" gets removed
// classWasAdded is false since "bar" was removed

classWasAdded = div.classList.toggle("bar"); // "bar" gets added
// classWasAdded is true since "bar" was added

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

Для получения дополнительной информации о classList, выберите MDN. Он также охватывает совместимость браузера, если это проблема, которую можно решить с помощью Modernizr для обнаружения и polyfill при необходимости.

Ответ 7

Вы также можете быть заинтересованы в его изменении с помощью jQuery: http://api.jquery.com/category/css/

Ответ 8

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("div").addClass(function(){
            return "par" ;
    });
});
</script>
<style>
.par {
    color: blue;
}
</style>
</head>
<body>
<div class="test">This is a paragraph.</div>
</body>
</html>