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

JavaScriptで列間のルールの色を設定するにはどうすればよいですか？

columnRuleColorを使用します ルールの色を設定するJavaScriptのプロパティ。次のコードを実行して、JavaScriptを使用して列間のルールの色を設定してみてください-

例

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