如何使用 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`，如 `