js 改变CSS样式|极客笔记

js 改变CSS样式

在前端开发中，我们经常需要使用JavaScript来改变页面元素的样式，以实现交互效果或动态展示内容。在本文中，我们将详细讨论如何使用JavaScript来改变CSS样式。

一、通过getElementById获取元素并改变样式

首先，我们可以通过getElementById方法获取页面上的元素，然后通过设置其style属性来改变元素的样式。例如，我们有一个按钮元素：

<button id="myButton">点击我</button>

现在，我们可以使用JavaScript来获取这个按钮元素，并改变其背景颜色：

var button = document.getElementById("myButton");
button.style.backgroundColor = "blue";

在上面的代码中，我们首先用document.getElementById方法获取了id为myButton的按钮元素，并将其赋值给变量button。然后，我们通过button.style.backgroundColor来改变按钮的背景颜色为蓝色。

二、通过classList.add()和classList.remove()方法添加和删除样式类

除了直接改变元素的样式属性外，我们还可以通过classList.add()和classList.remove()方法来添加和删除样式类。这样可以更方便地管理页面元素的样式。

假设我们有一个div元素，需要在用户点击按钮时添加一个highlight样式类来突出显示：

<div id="myDiv">这是一个div元素</div>
<button id="myButton">点击我</button>

接下来，我们可以定义一个点击事件处理函数，在函数中通过classList.add()方法来添加highlight样式类：

var button = document.getElementById("myButton");
var div = document.getElementById("myDiv");

button.addEventListener("click", function() {
  div.classList.add("highlight");
});

假设我们事先定义了一个highlight样式类，如下所示：

.highlight {
  background-color: yellow;
}

当用户点击按钮时，highlight样式类将被添加到div元素上，从而改变其背景色为黄色。

三、动态添加样式

有时候，我们需要在页面上动态地添加一些样式，而不是直接修改元素的样式属性或类。这时可以通过创建一个<style>元素并将其插入到<head>标签中来实现。

例如，我们想要在按钮元素上添加一个橙色的边框，但并没有定义对应的样式类。我们可以通过以下代码动态创建一个样式元素，并插入到页面头部：

var style = document.createElement("style");
style.textContent = "#myButton { border: 2px solid orange; }";
document.head.appendChild(style);

在上面的代码中，我们首先通过document.createElement("style")创建了一个<style>元素，并用style.textContent属性设置了样式内容。然后，我们将这个样式元素插入到页面的头部，从而动态地为按钮元素添加了一个橙色的边框。

四、使用setAttribute方法来修改元素的style属性

除了直接访问元素的style属性外，我们还可以使用setAttribute方法来动态地修改元素的style属性。例如，我们可以通过以下代码来改变按钮元素的文字颜色：

var button = document.getElementById("myButton");
button.setAttribute("style", "color: red;");

在上面的代码中，我们使用setAttribute方法将按钮元素的style属性设置为color: red;，从而将按钮的文字颜色改变为红色。

五、总结

通过本文的介绍，我们了解了如何使用JavaScript来改变页面元素的CSS样式。从直接修改元素样式属性到动态添加和移除样式类，再到动态创建样式元素和修改元素的style属性，我们可以灵活地控制页面样式，实现各种交互效果和页面展示需求。

js 改变CSS样式