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

JavaScriptで要素の段組み（カラム）数を設定・取得する方法

div要素を複数のカラムに分割したい場合は、columnCountプロパティを使用します。このプロパティに任意の数値を設定するだけで、要素内のテキストが指定した段数に自動的に分割されます。

columnCountプロパティとは

columnCountはCSSのマルチカラムレイアウトに関連するプロパティで、JavaScriptからはelement.style.columnCountの形式でアクセスできます。値を設定すればカラム数を変更でき、現在の設定値を取得することも可能です。

サンプルコード

以下のコードでは、ボタンをクリックするとdiv要素が4つのカラムに分割されます。実際にブラウザで動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <p>下のボタンをクリックして4カラムを作成</p>
      <button onclick="display()">Columns</button>
      <div id="myID">
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
         これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
      </div>
      <script>
         function display() {
            document.getElementById("myID").style.columnCount = "4";
         }
      </script>
   </body>
</html>

コードの解説

  • ボタンのクリックイベント：onclick属性でdisplay()関数を呼び出しています。
  • columnCountの設定：document.getElementById("myID").style.columnCount = "4";により、idが「myID」のdiv要素が4カラムに分割されます。

現在のカラム数を取得する方法

設定値を読み取りたい場合は、次のように記述します。

const cols = document.getElementById("myID").style.columnCount;
console.log(cols); // "4"

なお、スタイルが設定されていない場合、この方法では空文字が返される点に注意してください。CSSで指定された値を取得したい場合は、window.getComputedStyle()を使用すると確実です。

  1. CSSで要素を分割する列数を指定する方法（column-countプロパティの使い方）

    CSSで要素を分割する列数を指定するには？ 要素内のテキストを複数の段組み（カラム）に分割したい場合は、CSSの column-count プロパティを使用します。このプロパティに数値を指定するだけで、コンテンツが自動的に指定した列数に分割されて表示されます。 例えば column-count: 4; と指定すれば、新聞や雑誌のような4段組みのレイアウトを簡単に実現できます。JavaScriptなどを使わず、CSSだけで段組みが可能な点が大きな魅力です。 基本構文 column-count: 列数; サンプルコード：要素を4列に分割する 以下は、column-count プロパティを使って要素

  2. CSSのcolumn-spanプロパティで要素がまたがる列の数を設定する方法

    要素がまたがる列の数を指定するには、column-spanプロパティを使用します。このプロパティを活用すると、マルチカラムレイアウトの中で、見出しなどの特定の要素をすべての列にまたがって表示させることができます。column-spanプロパティの主な値all：要素がすべての列にまたがって表示されます。none：要素は通常どおり単一の列内に配置されます（初期値）。次のサンプルコードでは、column-count: 4; による4列のレイアウトを作成し、h1要素に対して column-span: all; を指定することで、見出しがすべての列にまたがるようにしています。破線の罫線（column-r