JavaScript基础教程（六十三）HTML DOM之改变CSS：魔法变身！JavaScript DOM操作CSS的终极指南-优快云博客

在Web开发中，JavaScript与CSS的结合创造了无数动态体验。通过HTML DOM，JavaScript能够动态改变页面样式，实现交互效果而无需重新加载页面。

三种改变CSS的方法

1. 直接修改元素样式

最直接的方法是使用style属性：

// 获取元素
const element = document.getElementById('myElement');

// 改变多个样式
element.style.color = 'blue';
element.style.backgroundColor = '#f0f0f0';
element.style.fontSize = '20px';

2. 动态切换CSS类

更优雅的方式是操作CSS类：

// 添加类
element.classList.add('active');

// 移除类
element.classList.remove('inactive');

// 切换类
element.classList.toggle('highlight');

// 检查是否包含某个类
if (element.classList.contains('special')) {
    // 执行某些操作
}

3. 获取计算后的样式

要获取元素最终应用的样式（包括CSS规则）：

// 获取计算后的样式
const style = window.getComputedStyle(element);
const width = style.getPropertyValue('width');
const color = style.getPropertyValue('color');

实际应用示例

<!DOCTYPE html>
<html>
<head>
<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: #3498db;
        transition: all 0.3s ease;
    }
    .highlight {
        background-color: #e74c3c;
        transform: scale(1.2);
    }
</style>
</head>
<body>

<div id="colorBox" class="box"></div>
<button onclick="toggleHighlight()">切换效果</button>

<script>
function toggleHighlight() {
    const box = document.getElementById('colorBox');
    box.classList.toggle('highlight');
    
    // 或者直接操作样式
    // box.style.backgroundColor = box.style.backgroundColor === 'rgb(231, 76, 60)' 
    //     ? '#3498db' : '#e74c3c';
}
</script>

</body>
</html>