JavaScript HTML DOM - 改变CSS

要使用JavaScript改变HTML元素的CSS样式，可以通过访问元素的style属性来实现。下面是一些常见的方法：

1. 直接设置样式属性：
```javascript
var element = document.getElementById("myElement");
element.style.color = "red";
element.style.fontSize = "20px";
```

2. 添加或移除CSS类：
```javascript
var element = document.getElementById("myElement");
element.classList.add("newClass");
element.classList.remove("oldClass");
```

3. 修改元素的类列表：
```javascript
var element = document.getElementById("myElement");
element.className = "newClass";
```

4. 使用style.cssText设置一组CSS属性：
```javascript
var element = document.getElementById("myElement");
element.style.cssText = "color: red; font-size: 20px;";
```

这些方法中的`"myElement"`是目标元素的ID，你需要根据实际情况将其替换为正确的ID。

注意：使用JavaScript直接修改样式可能会导致样式与CSS文件中定义的样式冲突。最好的做法是使用JavaScript添加或移除类，然后在CSS文件中定义相应的样式。

另外，请确保在修改元素样式之前，DOM已经加载完毕，可以在`window.onload`事件中执行上述代码，或将其放在页面底部进行执行，以确保元素已经存在于DOM中。

当你点击按钮时，可以使用JavaScript来改变一个元素的背景颜色。以下是一个简单的例子：

HTML代码：
```html
改变颜色

这是一个示例元素

```

JavaScript代码：
```javascript
function changeColor() {
  var element = document.getElementById("myElement");
  element.style.backgroundColor = "red";
}
```

在上述示例中，当点击"改变颜色"按钮时，`changeColor()`函数将被调用。该函数获取`myElement`元素并将其背景颜色设置为红色。

你可以将上述HTML和JavaScript代码放在一个HTML文件中并在浏览器中打开，然后点击"改变颜色"按钮，你将看到`myElement`元素的背景颜色变为红色。

请注意，这只是一个简单的例子，用于演示如何通过JavaScript改变CSS样式。在实际应用中，你可以根据需要修改其他样式属性或根据不同的事件触发执行不同的样式更改操作。