如何通过 JavaScript 设置列宽和列数?


要在一行声明中设置列宽和列数,请使用 JavaScript columns 属性。

示例

您可以尝试运行以下代码,以通过 JavaScript 设置列宽和列数 −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px solid yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change the column count to 2 and minimum size</p>
      <button onclick="display()">Change Column count and set size</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.columns = "70px 2";
         }
      </script>
   </body>
</html>

更新日期:23-6 月-2020

632 次查看

开启你的 职业生涯

完成课程获得认证

开始
广告