如何使用 JavaScript DOM 将背景图像设置为不重复?

javascriptserver side programmingprogramming

在本教程中，我们将学习使用 JavaScript DOM 将背景图像设置为不重复。要使用 JavaScript 将背景图像设置为不重复，请使用 backgroundRepeat 属性。它允许您设置背景图像是否在页面上重复。

在背景中使用图像确实使页面更具吸引力。但在将图像用作背景之前，必须完全理解将图像设置为背景所使用的属性。

否则，它会给您带来问题，例如无法在背景中显示完整图像、水平或垂直重复图像多次等。在本教程中，我们将讨论如何使用 JavaScript DOM 将背景图像设置为不重复。

使用 backgroundRepeart 属性

要将背景图像设置为不重复，我们使用 backgroundRepeat 属性，该属性采用的值与我们在 CSS 中赋予 background-epeat 属性的值相似。 backgroundRepeat 属性接受以下值 -

initial - 初始值将设置 backgroundRepeat 属性为其默认值。
inherit - 它将设置与我们当前设置属性的元素的父元素相同的值。
repeat - 这是 backgroundRepeat 属性的默认值，可在水平和垂直方向上重复图像。
repeat-x - 它将属性设置为仅在水平方向上重复图像。
repeat-y - 它将属性设置为在垂直方向上重复图像仅。
no-repeat − 此值将 backgrounRepeat 属性设置为从不重复图像，无论是水平方向还是垂直方向。

语法

将遵循以下语法将 backgroundRepeat 属性设置为不重复背景图像 −

var varName=document.getElementById('id')
varName.style.backgroundRepeat="value";

在上述语法中，首先，我们使用元素的id获取要设置属性的元素，然后为该属性分配一个值。

让我们借助一些代码示例来理解它。

算法

步骤 1 - 在第一步中，我们使用内部 CSS 将背景图像附加到文档的 body 元素。
步骤 2 - 在下一步中，我们将使用 JavaScript DOM 将 backgroundRepeat 更改为 no-repeat，默认情况下设置为 repeat。
步骤 3 - 在此步骤中，我们将通过指示用户单击按钮将背景图像的样式设置为"no"来显示所有更改重复"。

示例 1

下面的示例将解释如何使用 backgroundRepeat 属性通过 JavaScript DOM 将背景图像设置为不重复 −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
      }
   </style>
</head>
<body>
   <h3 >Style background image to no repeat with JavaScript DOM </h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

在上面的例子中，我们在 body 标签上使用 backgroundRepeat 属性并将其值设为 no−repeat 来停止重复图像。只需单击按钮，即可看到所有更改。

让我们讨论另一个图像在水平方向上重复的示例 −

注意 − 上面示例和此示例的算法几乎相似；您只需要在内部 CSS 中添加 background−repeat 属性，同时为 body 标签提供背景图像。如下例所示 -

示例 2

下面的示例将说明 backgroundRepeat 属性的使用 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
         background-repeat: repeat-x;
      }
   </style>
</head>
<body>
   <h2 style="color: blue;">Style background image to no repeat with JavaScript DOM </h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

在此示例中，我们可以清楚地看到，在单击按钮之前，图像在水平方向上重复，而在单击按钮后，图像停止重复，整个屏幕上仅显示单个图像。

让我们看另一个图像在垂直方向上重复的示例。

注意:此示例的算法与上一个类似；您只需将上一个示例中的 repeat−x 替换为 repeat−y 即可在垂直方向上重复图像。

示例 3

以下示例显示使用 JavaScript 的 backgrounRepeat 停止垂直图像重复 -

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url("https://www.tutorialspoint.com/images/QAicon-black.png");
         background-repeat: repeat-y;
      }
   </style>
</head>
<body>
   <h2 style="color: blue;">Style background image to no repeat with JavaScript DOM</h2>
   <div id="result">Before clicking the button</div>
   <button id="btn" onclick="display()">click to style no repeat</button>
   <script>
      function display() {
         var obj = document.getElementById("result");
         var body = document.body;
         body.style.backgroundRepeat = "no-repeat";
         obj.innerHTML = "After clicking the button";
      }
   </script>
</body>
</html>

在此示例中，我们通过使用 JavaScript DOM 的 backgroundRepeat 属性停止了图像在垂直方向上的重复。

在本教程中，我们了解了 JavaScript DOM 的 backgroundRepeat 属性，以停止图像在任何方向上的重复，无论是在垂直方向、水平方向还是两个方向上重复。