如何使用 JavaScript DOM 将背景图像设置为不重复?
在本教程中，我们将学习使用 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 属性，以停止图像在任何方向上的重复，无论是在垂直方向、水平方向还是两个方向上重复。
