使用DOM API访问和操作CSS样式

# 1. 介绍DOM API和CSS样式（引言）

## 1.1 DOM API概述

DOM（Document Object Model）是一种表述和操作HTML、XML文档的接口，它将文档解析为一个由节点和对象（包括元素、属性和文本等）组成的结构化的树形模型，可以通过DOM提供的API对这些节点和对象进行访问和操作。

在Web开发中，使用DOM API可以轻松地操作网页中的元素、修改内容、添加样式以及响应用户交互。

## 1.2 CSS样式简介

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML和XML文档的表现层样式。通过CSS，可以设置文本的字体、颜色、间距，以及页面元素的大小、位置、边框等外观样式。

在Web开发中，CSS样式被广泛应用于美化页面、布局设计和响应式设计等方面。通过DOM API，可以访问和修改元素的CSS样式，实现动态样式变化和交互效果。

# 2. 了解DOM API中的CSS样式访问方法

在使用DOM API来操作网页中的元素样式前，我们首先需要了解如何访问和获取这些样式。DOM API提供了多种方法来获取元素的CSS样式信息，主要包括使用`getElementById`方法、`querySelector`方法和`getComputedStyle`方法。

### 使用getElementById方法获取元素对象

`getElementById`方法是Document对象的方法之一，它可以通过元素的ID属性来获取对应的元素对象。一旦获取到该元素对象，我们就可以通过其`style`属性来访问和修改元素的内联样式。

// HTML代码
// <div id="myDiv" style="color: red; font-size: 16px;">Hello, World!</div>

// JavaScript代码
const myDiv = document.getElementById('myDiv');
console.log(myDiv.style.color); // 输出：red
console.log(myDiv.style.fontSize); // 输出：16px

### 使用querySelector方法获取元素对象

`querySelector`方法是Document对象和Element对象都具有的方法，它接收一个CSS选择器作为参数，返回匹配该选择器的第一个元素对象。通过该方法，我们可以获取文档中匹配特定选择器的元素对象，并操作其样式。

// HTML代码
// <p class="intro">这是一个段落。</p>

// JavaScript代码
const introPara = document.querySelector('.intro');
console.log(window.getComputedStyle(introPara).color); // 输出：实际应用的颜色值

### 使用getComputedStyle方法获取元素样式

`getComputedStyle`方法返回一个对象，包含了指定元素的所有CSS属性的值，这些值是以计算后的形式展示的，即使它们是在样式表中声明的。通过这种方式，我们能够获取到元素应用的最终样式信息，而不仅仅是内联样式的值。

// HTML代码
// <p id="myPara" style="font-size: 14px;">这是另一个段落。</p>

// JavaScript代码
const para = document.getElementById('myPara');
const paraStyles = window.getComputedStyle(para);
console.log(paraStyles.fontSize); // 输出：14px

通过上述方法，我们可以轻松地获取到DOM元素应用的CSS样式，为后续的样式操作和修改打下基础。接下来，我们将介绍如何使用DOM API来修改获取到的CSS样式。

# 3. 使用DOM API修改CSS样式

在前面的章节中，我们已经了解了如何通过DOM API访问元素的CSS样式。现在，我们将学习如何使用DOM API来修改元素的CSS样式。

#### 3.1 修改元素的内联样式

通过DOM API，我们可以直接修改元素的内联样式。所谓内联样式，即在元素的style属性中定义的样式。要修改一个元素的内联样式，我们可以使用元素对象的style属性。

示例代码如下（JavaScript）：

// 获取元素对象
let element = document.getElementById("my-element");

// 修改元素的内联样式
element.style.backgroundColor = "red";
element.style.color = "white";
element.style.fontSize = "20px";

代码解析：
1. 首先，我们使用getElementById方法获取到id为"my-element"的元素对象。
2. 然后，通过元素对象的style属性来修改元素的内联样式，例如修改背景颜色、文字颜色和字体大