数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 repeat”来显示所有更改。
示例 1
以下示例将说明如何使用 backgroundRepeat 属性使用 JavaScript DOM 将背景图片样式设置为不重复 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://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 标签使用了值为 no-repeat 的 backgroundRepeat 属性以停止重复图片。只需单击按钮，您就可以看到所有更改。
让我们讨论另一个图片在水平方向上重复的示例 -
注意−上述示例和本示例的算法几乎相同；您只需要在为 body 标签提供背景图片时在内部 CSS 中添加 background-repeat 属性。如下例所示 -
示例 2
以下示例将说明 backgroundRepeat 属性的使用 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://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
以下示例显示了使用 backgrounRepeat 和 JavaScript 停止垂直图片重复 -
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://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 属性，以停止图片在任何方向上的重复，无论是在垂直、水平还是两个方向上重复。
2K+ 浏览量
