HTML DOM 样式的 boxSizing 属性

htmlweb developmentfront end technology更新于 2024/3/11 1:48:17

HTML DOM 的 boxSizing 属性用于指定元素总宽度和高度的计算方式。其值可以是 "border-box" 或 "content-box"。

以下是语法 −

设置 boxSizing 属性 −

object.style.boxSizing = "content-box|border-box|initial|inherit"

属性值解释如下 −

值	描述
content-box	这是默认值，任何内边距或边框宽度都将添加到内容框的最终宽度中。
border-box	在border-box中，指定的宽度保持不变，如果应用了任何内边距或边框，内容框会缩小。
initial	用于将此属性设置为初始值。
inherit	用于继承父属性值

让我们查看 boxSizing 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      height:100px;
      width: 350px;
      border: 30px solid lightpink;
      box-sizing: border-box;
   }
</style>
<script>
   function changeBoxSizing(){
      document.getElementById("DIV1").style.boxSizing="content-box";
      document.getElementById("Sample").innerHTML="The box sizing is now changed to content-box ";
   }
</script>
</head>
<body>
   <div id="DIV1">
      THIS IS SAMPLE TEXT INSIDE DIV.HELLO WORLD DIV.
   </div>
   <p>Change the above div box-sizing property by clicking the below button</p>
   <button onclick="changeBoxSizing()">Change Box Sizing</button>
   <p id="Sample"></p>
</body>
</html>