どうも!LSSです!!
JavaScriptからCSSのプロパティを色々制御する事ができますが、gridレイアウトの設定についての制御(列数とか)が調べてもなかなか情報に行き当たりませんでした^^;
とりあえず成功したので、ここに書いておきます!
gridレイアウトのおさらい
コード
<div style="display: grid; grid-template-columns: repeat(3,50px);">
<div style="border: 1px solid black;">1</div>
<div style="border: 1px solid black;">2</div>
<div style="border: 1px solid black;">3</div>
<div style="border: 1px solid black;">4</div>
<div style="border: 1px solid black;">5</div>
</div>
1行目の<div>から最後の</div>の間に、5つの<div>~</div>が入っている、という構造です。
1行目の<div>に、
display: grid;
と、
grid-template-columns: repeat(3,50px);
をCSSで指定しています。
これは
「このdivはグリッドレイアウトを使用します」
「列は、長さ50pxの列を3回繰り返し」
という指定ですね。
このように3列に区切りを用意した<div>の中に、子要素となる<div>を5つ入れているので、
こういう見た目になります。
列数をJavaScriptから制御するには?
見た目は変わっていませんが、これは「列数をJavaScriptから指定」しています。
コード
<div id="gamen" style="display: grid;">
<div style="border: 1px solid black;">1</div>
<div style="border: 1px solid black;">2</div>
<div style="border: 1px solid black;">3</div>
<div style="border: 1px solid black;">4</div>
<div style="border: 1px solid black;">5</div>
</div>
<script>// <![CDATA[
gamen.style.gridTemplateColumns='repeat(3,50px)';
// ]]></script>
まず、JavaScriptから制御するために、外側の<div>に「id="gamen"」 とidをつけました。
また、そのstyleの指定から「grid-template-columns: repeat(3,50px);」をカット。
その代わりに、
gamen.style.gridTemplateColumns='repeat(3,50px)';
というコードをスクリプトに書いています。
意外とこの情報が見つかりませんでした^^;
JavaScriptからCSSのプロパティを制御する事ができますが、この
「grid-template-columnsプロパティをJavaScriptから制御するには?」
という情報がググってもなかなか見つけられませんでした^^;
JavaScriptで指定する時には、
要素名(id).style.CSSプロパティ名=値;
というカタチで指定するのですが、CSSとJavaScriptの違いから、
「CSSのプロパティ名からハイフン(-)を取り除き、ハイフンの直後の文字を大文字にしたものを書く」というのがお決まりのパターンになっているようです。
(全てのCSSプロパティがそれで指定できるのか?は不明w)
JavaScriptで指定できると何が嬉しいのか?
マス目を使った表現を行う時、例えば表であったり、マスを使ったゲームだったり、の時に、
retsu=3;
gamen.style. gridTemplateColumns='repeat('+ retsu +',50px)';
のようなコードで、列数を変数に入れておいて列数を増減させる事ができます^^
例えば(あまり意味はありませんが)↓こんな感じの事ができますw
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^