Как изменить стиль класса CSS через Javascript?

Question

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

Answer 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>

Answer 2

Поскольку classList поддерживается во всех основных браузерах и jQuery отбрасывает поддержку IE <9 </a> (в ветке 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>

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Начальный HTML

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

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

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 для обнаружения и полифилл при необходимости.

Answer 6

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

Answer 7

Если вы хотите манипулировать фактическим классом CSS вместо изменения элементов DOM или использования модификаторов CSS-классов, см. https://stackoverflow.com/a/50036923/482916.

Answer 8

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

Answer 9

<!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>