javascript设置页面背景色及背景图片的方法

2023-12-15css教程

首先我们来学习如何使用JavaScript设置页面的背景色。

设置背景色

步骤1： 定义HTML文件，我们需要先定义一个HTML文件，例如这里的index.html文件。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景色</title>
</head>
<body>
  <h1>网站标题</h1>
  <p>这是一段内容。</p>
</body>
</html>

步骤2： 添加JavaScript代码，我们可以使用JavaScript代码来设置页面的背景色。在HTML文件中，我们添加一些JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景色</title>
  <script>
    document.body.style.backgroundColor = "blue";
  </script>
</head>
<body>
  <h1>网站标题</h1>
  <p>这是一段内容。</p>
</body>
</html>

在这里，我们使用document.body.style.backgroundColor属性来设置页面的背景色。我们将页面的背景色设置为蓝色。您可以根据需要使用不同的背景颜色。

步骤3： 打开HTML文件，我们可以在浏览器中打开HTML文件以查看页面的背景色是否已设置为蓝色了。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景色</title>
  <script>
    document.body.style.backgroundColor = "blue";
  </script>
</head>
<body>
  <h1>网站标题</h1>
  <p>这是一段内容。</p>
</body>
</html>

我们也可以使用以下的示例代码使用一个按钮来动态地改变页面的背景色。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景色</title>
</head>
<body>
  <h1>网站标题</h1>
  <p>点击按钮更改背景颜色</p>
  <button onclick="myFunction()">更改背景颜色</button>
  <script>
    function myFunction() {
      document.body.style.backgroundColor = "blue";
    }
  </script>
</body>
</html>

在这里，我们定义了一个名为myFunction()的JavaScript函数，该函数将页面的背景色设置为蓝色。当用户单击按钮时，该函数将被调用。

设置背景图片

如果您想在您的网站中添加一个背景图片，下面是一个示例代码。同样地，我们需要先定义一个HTML文件。

步骤1： 定义HTML文件。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景图片</title>
</head>
<body>
  <h1>网站标题</h1>
  <p>这是一段内容。</p>
</body>
</html>

步骤2： 添加JavaScript代码。要设置背景图片，我们需要使用document.body.style.backgroundImage属性。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript设置页面背景图片</title>
  <style>
    body {
      background-size: cover;
      background-repeat: no-repeat;
    }
  </style>
  <script>
    document.body.style.backgroundImage = "url('background-image.jpg')";
  </script>
</head>
<body>
  <h1>网站标题</h1>
  <p>这是一段内容。</p>
</body>
</html>

在这里，我们将页面的背景图像设置为background-image.jpg。我们还使用以下的CSS属性定义图片的大小和重复的方式。

body {
  background-size: cover;
  background-repeat: no-repeat;
}

background-size属性定义图片如何调整以适应页面的大小。cover值指定图片尽可能覆盖整个页面，而不是留有任何的空白。

background-repeat属性定义了图片是否应该重复。在这里，我们将其设置为no-repeat，这意味着图片应该只在页面上显示一次。

步骤3： 打开HTML文件，在浏览器中打开HTML文件以查看页面的背景图像。

注意：要测试这个示例，您需要在HTML文件的相同目录中放置一个名为background-image.jpg的图像文件。

这就是用JavaScript设置页面背景色和背景图片的方法。通过这两个示例说明，相信您已经明白怎么使用JavaScript来自定义您的网站的背景了。

The End

相关推荐

背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

简单但很实用的5个css属性

我的css框架——base.css(重设浏览器默认样式)

兼做美工之导航条制作过程分享

JS 控制CSS样式表

Html5实现首页动态视频背景的示例代码

热门文章

热门精品源码

最新VIP资源