Для изменения CSS в зависимости от условия в JavaScript можно использовать несколько подходов. Рассмотрим два из них: добавление/удаление классов и прямое изменение стилей элемента.
1. Добавление/удаление классов:
<!DOCTYPE html>
<html>
<head>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<button onclick="changeColor()">Изменить цвет</button>
<p id="text">Текст</p>
<script>
function changeColor() {
const textElement = document.getElementById('text');
if (textElement.classList.contains('red')) {
textElement.classList.remove('red');
} else {
textElement.classList.add('red');
}
}
</script>
</body>
</html>
2. Прямое изменение стилей элемента:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="changeColor()">Изменить цвет</button>
<p id="text" style="color: black;">Текст</p>
<script>
function changeColor() {
const textElement = document.getElementById('text');
if (textElement.style.color === 'red') {
textElement.style.color = 'black';
} else {
textElement.style.color = 'red';
}
}
</script>
</body>
</html>
Оба приведенных примера демонстрируют способы изменения CSS в зависимости от условия. Но в целом, использование добавления/удаления классов предпочтительнее, так как позволяет разделить стили и поведение элемента, делая код более структурированным и управляемым.