如何使用 JavaScript 设置背景的绘画区域?

javascriptobject oriented programmingfront end technology

在本教程中，我们将学习如何使用 JavaScript 设置背景的绘画区域。

任务是定义背景绘画区域。background-clip 属性通常用于测量任何网页背景的绘画空间。它指定我们可以根据其内容或图像/视频修改网页的背景。

background-clip 属性指定元素的背景是否延伸到其边框框、填充框或内容框下方。

如果元素没有背景图像或颜色，则此属性没有视觉效果，除非边框具有透明或部分不透明区域(由于边框样式或边框图像)；否则，边框会掩盖差异。

要使用 JavaScript 设置背景的绘制区域，请使用 backgroundClip 属性。

以下是使用 JavaScript 设置背景绘制区域的方法。

将 Style backgroundClip 属性设置为"content-box"

背景在内容框内绘制(剪裁到内容框)。content-box 属性仅指定内容的背景颜色。

CSS 中的所有内容周围都有一个框，了解这些框对于创建更复杂的 CSS 布局或将项目与其他项目对齐至关重要。显示内容的区域是其大小，具有 inline-size 和 blocksize 等属性，以及内容框属性中的宽度和高度。

语法

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 属性。

填充框属性将背景剪裁在元素填充的外边缘，防止其延伸到边框中。当 background-clip 属性设置为 padding-box 时，背景颜色在元素填充结束的地方停止。

语法

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

getElementById() 方法检索框属性并修改框的背景区域以匹配 padding-box 样式。

示例

在此示例中，我们制作了一个带有 3 px 边框和红色虚线背景的框。框和内容之间的填充为 40px。框的高度和宽度分别为 240px 和 250px。框具有黄色背景。background-clip 属性的值是内容框，如 <style> 中指定的那样标签，允许在内容框的边缘剪切背景。

框内是一些 lorem ipsum 文本。使用 style.backgroundClip 属性，背景绘制区域更改为填充。绘制区域包含此框的全部填充和内容区域，不包括边框。


<html>
<head>
<style>
   #box {
      border: 3px dashed red;
      padding: 40px;
      width: 500px;
      height: 100px;
      background-color: yellow;
      background-clip: content-box;
   }
</style>
</head>
<body>
   <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="padding-box";
      }
   </script>
</body>
</html>