JS动态修改网页body的背景色实例代码

下面是关于JS动态修改网页body的背景色实例代码的完整攻略：

步骤一：准备html与css代码

首先，我们需要准备一个HTML页面以及相应的CSS样式表。下面是一个简单的HTML页面，其中在body标签中设置了一个CSS类名为"bg-color"：

<!DOCTYPE html>
<html>
<head>
  <title>JS动态修改网页body的背景色实例代码</title>
  <style>
    .bg-color {
      background-color: #ccc;
    }
  </style>
</head>
<body class="bg-color">
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>
</body>
</html>

步骤二：编写JS代码

接下来，我们需要编写一个JavaScript函数，用于动态修改网页的背景色。代码如下：

function changeBgColor(color) {
  document.body.style.backgroundColor = color;
}

该函数接受一个参数color，用于指定要设置的背景色。在函数内部，我们通过document.body来获取网页的body元素，并设置其backgroundColor属性为传入的color值。

步骤三：调用JS代码

最后，在HTML页面中添加一个按钮，并在按钮的click事件中调用changeBgColor函数来改变页面的背景色。具体代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>JS动态修改网页body的背景色实例代码</title>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>

  <button onclick="changeBgColor('#f00')">红色背景</button>
  <button onclick="changeBgColor('#0f0')">绿色背景</button>
  <button onclick="changeBgColor('#00f')">蓝色背景</button>

  <script>
    function changeBgColor(color) {
      document.body.style.backgroundColor = color;
    }
  </script>
</body>
</html>

在该示例代码中，我们添加了三个按钮，分别调用changeBgColor函数并传入不同的颜色值来改变背景色。用户可以通过点击按钮来切换不同的背景色。

另外，我们也可以通过在文本框中输入颜色值来触发JS代码，从而实现更加灵活的页面背景色切换。具体操作方法可以参考下面的示例：

<!DOCTYPE html>
<html>
<head>
  <title>JS动态修改网页body的背景色实例代码</title>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落</p>

  <input type="text" id="bg-color" placeholder="输入背景色">
  <button onclick="changeBgColor()">切换背景色</button>

  <script>
    function changeBgColor() {
      var color = document.getElementById('bg-color').value;
      document.body.style.backgroundColor = color;
    }
  </script>
</body>
</html>

在该示例代码中，我们添加了一个文本框和一个按钮，当用户在文本框中输入颜色值并点击按钮时，JS代码将获取文本框中输入的值，并将其设置为页面的背景色。通过此种方式，用户可以直接输入颜色值来快速切换背景色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS动态修改网页body的背景色实例代码 - Python技术站