Javascript-форум - управление css классами

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - управление css классами (https://javascript.ru/forum/dom-window/43643-upravlenie-css-klassami.html)

управление css классами

можно как-то изменять css класс?
т.е. например

Код:

.cl{background:black}

переопределить на

Код:

.cl{background:white}

таких операций будет много,писать кучу классов или добавлять каждый раз новый <style></style> не подходит

Изменять листы стилей можно через document.styleSheets или LinkOrStyleElement.sheet. Для описания API гуглите или смотрите справочник.

Вот рабочий пример.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style id="bodyBgColor" type="text/css">
body {
  background-color: white;
}
</style>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script type="text/javascript">
function changeBgColor() {
  var color=Math.floor(Math.random()*(1<<24));
  var r=color>>16, g=(color>>8)&0x0000ff, b=color&0x0000ff;
document.getElementById("bodyBgColor").sheet.cssRules[0].style.backgroundColor="rgb("+r+","+g+","+b+")";
}
</script>
<div>
<button onclick="changeBgColor()">Изменить цвет фона</button>
</div>
</body>
</html>