如何在 JavaScript 中設定列之間的規則的樣式?


使用 columnRuleStyle 屬性來設定規則的樣式。你可以嘗試執行以下程式碼,以 JavaScript 設定列之間的規則樣式 −

示例

即時演示

<!DOCTYPE html>
<html>
   <head>
      <style>
         #myID {
            column-count: 4;
            column-rule: 4px dotted yellow;
         }
      </style>
   </head>
   <body>
      <p>Click below to change style</p>
      <button onclick="display()">Change Style 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.columnRuleStyle = "inset";
         }
      </script>
   </body>
</html>

更新於: 23-6-2020

79 次瀏覽

開啟你的 職業生涯

透過完成課程獲取認證

開始
廣告
© . All rights reserved.