JS Как изменить цвет класса css из javascript?
Я хотел бы изменить цвет из класса div. Я искал в сети некоторую информацию, но она не работает для меня.
У меня есть класс стиля css, в котором есть свойство фоновый цвет, и я хочу изменить это свойство из файла JS.
Я хочу в классе гмбокс изменить фоновый цвет:, как мне это сделать из JS-файла?
.gmBox {
vertical-align: middle;
padding: 10px;
margin: 5px;
background-color: yellow;
color: black;
font-size: 23px;
border-radius: 5px;
}<div class = "gmBox" id = "gmType">GM12</div>Вы не можете изменить файл css из файла js, вместо этого вы можете использовать другой класс или встроенные стили.
@VladimirBogomolov можно пример?
document.getElementById("gmType").style.backgroundColor = "red"; или document.querySelector(".gmBox").style.backgroundColor = "red"; ПОСЛЕ загрузки элемента
@mplungjan вопрос об изменении не стиля элемента, а стиля CLASS (поэтому ваша ссылка на минимальное усилие к этому не относится)
Хотя OP может быть удовлетворен ответом Y на свой вопрос X, сам вопрос является нет дубликатом ссылки, с которой он был закрыт. Камиль Килчевски на самом деле ответил на заданный вопрос, и он интересен сам по себе (хотя мало кто должен был в этом нуждаться).
@KamilKiełczewski Очевидно, это применимо, поскольку OP был доволен ответом ниже.
используйте jQuery, jQuery("#gmType").css('фоновый цвет': '#343333');
@Вишва почему? - ОП не пометил это jQuery
@Vishwa Сейчас 2019 год. Не рекомендуйте людям использовать JQuery.
вот почему я предложенный использую jQuery, если это возможно. Намного проще
@RobbyCornelissen, что бы вы использовали? ванильный JS?
@Vishwa В 99% случаев да. И, возможно, lodash для утилит обработки данных. Если вам действительно нужны манипуляции с DOM и вы еще не используете фреймворк, возможно, денежные средства.
не знал про наличные, спасибо, попробуй
@RobbyCornelissen, это мой jquery: let $ = s => document.querySelector(s); :P
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте сделать это (кнопка добавлена только для того, чтобы показать эффект переключения):
$("#toggle").on("click", function(){
$(".gmBox").toggleClass("toggleBgColor");
}).gmBox {
vertical-align: middle;
padding: 10px;
margin: 5px;
background-color: yellow;
color: black;
font-size: 23px;
border-radius: 5px;
}
.toggleBgColor {
background-color: blue;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "gmBox" id = "gmType">GM12</div>
<button id = "toggle">Click me to toggle!!!</button>Чтобы изменить класс, вам нужно отредактировать стили документа
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.gmBox')
.style['background-color']='red';
[...document.styleSheets[0].cssRules].find(x=> x.selectorText=='.gmBox').style['background-color']='red';.gmBox {
vertical-align: middle;
padding: 10px;
margin: 5px;
background-color: yellow;
color: black;
font-size: 23px;
border-radius: 5px;
}<div class = "gmBox" id = "gmType">GM12</div>Дублирование stackoverflow.com/questions/13528512/…, которое выиграет от вашей записи
Похоже на проблема XY. Чего вы пытаетесь достичь?