如何用 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>

更新於: 2020 年 6 月 23 日

79 次瀏覽

開啟你的 職業生涯

完成課程後獲得認證

開始學習
廣告
© . All rights reserved.