カスケード呼び出し

以前、Dart で HTML 要素にスタイルを設定する方法を 2 種類紹介しました。
（その１、その２）


それぞれの方法で文字色を赤色にするだけのシンプルな内容でしたが、実際のケースでは複数のものを同時に設定することが多いと思います。


そういったときに便利なのが今回紹介する「カスケード呼び出し（カスケード演算子）」です。
コードを見たほうが説明しやすいので、次のコードをご覧ください。





「#sample_container_id」という id の div 要素に、文字色、フォントサイズ、フォントを設定しています。


その際に、それぞれのスタイル設定をカスケード演算子「..」で繋ぐことで一度に行っています。
このような複数の関数の同時実行や複数のプロパティへ同時アクセスすることを「カスケード呼び出し」といいます。


コーディングとしては毎回の「div.style」部分を省略でき、適度な改行を入れることで可読性もよくなると思います。
スタイル設定や、要素のプロパティに対するアクセスの際はぜひとも使っていきたいですね！


ちなみに、、、スタイル設定その２の方法でもカスケード呼び出しは可能ですので、スタイル設定の方法自体は好きな方法でよさそうです！



その２の方法だと、スタイルを「;」区切りで複数設定できるから、わざわざカスケード呼び出しする必要ないんですけどね。。。

Dart でスタイルを設定するには２

以前、Dart でスタイルを設定する方法を記事にしましたが、今回は別の方法でスタイル設定してみます。（前回の記事はこちら）


Dart には HTML 要素を扱うための「Element」クラスがあります。
このクラスのプロパティ「attributes」を用いた方法です。




前回の記事と全く同じスタイルの設定ですが、CSS 専用のクラスを用いるのではなく、汎用的な「attributes」に key 値を渡すことで実現しています。
個人的にはこちらの書き方のほうが好きですね。


今回は以上です。