📌  相关文章
📜  更改背景渐变 javascript (1)

📅  最后修改于: 2023-12-03 15:40:12.290000             🧑  作者: Mango

更改背景渐变 JavaScript

JavaScript 可以用来更改网页的背景颜色和背景渐变。通过使用 DOM (文档对象模型) 和 CSS 属性，我们可以轻松地在页面中更改背景颜色和渐变。以下是更改背景渐变的一些方法：

更改背景颜色
document.body.style.backgroundColor = "red";

以上代码将文档的背景颜色更改为红色。您可以将“red”更改为其他任何 CSS 颜色。

更改背景渐变
document.body.style.background = "linear-gradient(red, yellow)";

以上代码将文档的背景渐变更改为从红色到黄色的线性渐变。您可以将“red”和“yellow”更改为任何其他 CSS 颜色，也可以尝试其他渐变类型。

使用 CSS 类更改背景渐变

另一个常见的更改背景渐变的方法是通过为文档的 body 元素添加或删除 CSS 类来更改渐变。以下是一个示例：

<style>
  .gradient1 {
    background: linear-gradient(red, yellow);
  }
  .gradient2 {
    background: linear-gradient(orange, pink);
  }
</style>
<body>
  <button onclick="document.body.classList.toggle('gradient1')">红黄渐变</button>
  <button onclick="document.body.classList.toggle('gradient2')">橙粉渐变</button>
</body>

以上代码创建了两个不同的渐变类（gradient1 和 gradient2），并为文档的 body 元素创建了两个按钮，让用户可以切换不同的渐变。当用户点击按钮时，JavaScript 将为 body 元素添加或删除相应的类。

这些都是使用 JavaScript 更改背景颜色和背景渐变的一些基本方法。通过结合 DOM 和 CSS，您可以创建出多种惊人的效果和动画。