如何使用JavaScript設定背景的繪製區域？

Javascript 面向物件程式設計前端技術

在本教程中，我們將學習如何使用JavaScript設定背景的繪製區域。

任務是定義背景繪製區域。`background-clip` 屬性通常用於測量網頁背景的繪製空間。它指定我們可以根據其內容或影像/影片修改網頁的背景。

`background-clip` 屬性指定元素的背景是否延伸到其邊框框、填充框或內容框之下。

如果元素沒有背景影像或顏色，則此屬性不會產生視覺效果，除非邊框具有透明或部分不透明區域（由於邊框樣式或邊框影像）；否則，邊框會掩蓋差異。

要使用JavaScript設定背景的繪製區域，請使用 `backgroundClip` 屬性。

以下是使用JavaScript設定背景繪製區域的方法。

將樣式 `backgroundClip` 屬性設定為“content-box”

背景繪製在內容框內（裁剪到內容框）。`content-box` 屬性僅為內容指定背景顏色。

CSS 中的一切都圍繞著一個盒子，理解這些盒子對於建立更復雜的 CSS 佈局或將專案與其他專案對齊至關重要。顯示內容的區域是其大小，具有諸如 `inline-size` 和 `blocksize` 屬性，以及 `content-box` 屬性中的寬度和高度。

語法

document.getElementById("box").style.backgroundClip = "content-box";

`getElementById()` 方法獲取盒子屬性並更改盒子的背景區域以匹配 `content-box` 樣式。

示例

在這個示例中，我們建立了一個邊框為 3px 的盒子，顏色為虛線紅色。盒子和內容之間的填充為 40px。盒子的高度和寬度分別為 240px 和 250px。盒子具有黃色的背景顏色。`background-clip` 屬性的預設值為 `border-box`，它允許背景延伸到元素邊框的邊緣。

盒子裡面寫了一些文字。使用 `style.backgroundClip` 屬性將背景的繪製區域更改為 `content-box`。繪製區域僅覆蓋此屬性的內容區域，不包括填充區域。


<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 40px;
      width: 600px;
      height: 100px;
      background-color: yellow;
      background-clip: border-box;
   }
</style>
</head>
<body>
   <h3> Setting the Style backgroundClip Property to 'content-box"
   </h3>
   <button onclick="displayFunc()"> Set painting area </button>
   <div id="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
   </div>
   <script>
   function displayFunc() {
      document.getElementById("box").style.backgroundClip="content-box";
   }
   </script>
</body>
</html>

將樣式 `backgroundClip` 屬性設定為“padding-box”

樣式表盒子模型是一個具有邊框、邊距、填充和內容等多個屬性的容器。它用於建立網頁的佈局和設計。它可以用作修改各種元素佈局的框架。我們將瞭解如何在 HTML 中使用稱為內容框的盒子模型。

要指定背景顏色或影像可以延伸到元素填充或內容之外的範圍；使用 `background-clip` 屬性。

`padding-box` 屬性在元素填充的外邊緣裁剪背景，防止它延伸到邊框中。當 `background-clip` 屬性設定為 `padding-box` 時，背景顏色在元素填充結束的地方停止。

語法

document.getElementById("box").style.backgroundClip = "padding-box";

`getElementById()` 方法檢索盒子屬性並修改盒子的背景區域以匹配 `padding-box` 樣式。

示例

在這個示例中，我們建立了一個帶有 3px 邊框和虛線紅色背景的盒子。盒子和內容之間的填充為 40px。盒子的高度和寬度分別為 240px 和 250px。盒子具有黃色的背景。`background-clip` 屬性的值為 `content-box`，如 `