以前、Dart で HTML 要素にスタイルを設定する方法を 2 種類紹介しました。
(その1、その2)
それぞれの方法で文字色を赤色にするだけのシンプルな内容でしたが、実際のケースでは複数のものを同時に設定することが多いと思います。
そういったときに便利なのが今回紹介する「カスケード呼び出し(カスケード演算子)」です。
コードを見たほうが説明しやすいので、次のコードをご覧ください。
「#sample_container_id」という id の div 要素に、文字色、フォントサイズ、フォントを設定しています。
その際に、それぞれのスタイル設定をカスケード演算子「..」で繋ぐことで一度に行っています。
このような複数の関数の同時実行や複数のプロパティへ同時アクセスすることを「カスケード呼び出し」といいます。
コーディングとしては毎回の「div.style」部分を省略でき、適度な改行を入れることで可読性もよくなると思います。
スタイル設定や、要素のプロパティに対するアクセスの際はぜひとも使っていきたいですね!
ちなみに、、、スタイル設定その2の方法でもカスケード呼び出しは可能ですので、スタイル設定の方法自体は好きな方法でよさそうです!
その2の方法だと、スタイルを「;」区切りで複数設定できるから、わざわざカスケード呼び出しする必要ないんですけどね。。。