資料結構
網路
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.tw/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.tw/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.tw/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+ 瀏覽量
