如何使用 JavaScript 设置列之间的间距宽度?


使用 columnRuleWidth 属性可以设置列之间的宽度。你可以尝试运行以下代码,使用 JavaScript 设置列之间的间距宽度 −

示例

现场演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px solid yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change width</p>
      <button onclick="display()">Change Width between Columns</button>
      <div id="myID">
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
         This is demo text. This is demo text. This is demo text. This is demo text.
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.columnRuleWidth = "8px";
         }
      </script>
   </body>
</html>

更新于: 2020年6月23日

85浏览

开启您的 事业

完成课程,获取认证

开始
广告