Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

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>

  1. CSSを使用して列間のルールの幅を設定します

    column-rule-widthを使用します 列間のルールの幅を設定するプロパティ。 例 次のコードを実行して、column-rule-widthプロパティを実装してみてください。 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;   &nb

  2. CSSを使用して列間のルールのスタイルを設定します

    列間のルールのスタイルを設定するには、 column-rule-styleを使用します 財産。次のコードを実行して、 column-rule-styleを実装してみてください。 プロパティ。 例 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;