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

JavaScriptで要素を分割する列数を設定または返す方法は？

divを3つの列に分割するには、 columnCountを使用します 財産。列数を設定し、divを除算します。

例

次のコードを実行して、JavaScriptで要素が分割される列の数を返すことができます-

<!DOCTYPE html>
<html>
   <body>
      <p>Click below to create 4 columns</p>
      <button onclick="display()">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.columnCount = "4";
         }
      </script>
   </body>
</html>

  1. CSSで要素を分割する列数を指定する方法

    要素を分割する列の数を指定するには、column-countプロパティを使用します。 次のコードを実行して、4列のcolumn-countプロパティを実装してみてください 例 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;    

  2. 要素がCSSでまたがる列の数を設定します

    要素がまたがる列の数を設定するには、column-spanプロパティを使用します。次のコードを実行して、column-spanプロパティを実装してみてください。 例 <!DOCTYPE html> <html>    <head>       <style>          .demo {             column-count: 4;