2017年02月23日(木)
【カスタムプロパティを有効活用する Part2】JavascriptとCSSをつなげる方法
本記事ではCSSカスタムプロパティをCSSとJavaScriptを繋ぐ橋としてどのように使えるかを検証していきます。
CSSとJavaScriptをそれぞれ独立させる
双方の関係性の単純化を図るために、多くの場合CSSとJavaScriptは可能な限り独立させると思います。
最も簡単な方法は、明確に定義されたCSSクラスを用いることです。JSサイドはそれを必要に応じて追加、削除します。
このアプローチであればCSSで全ての装飾をコントロールでき、JavaScriptは単に状態を変更するためのトリガーとなります。そのため、色の変更を行いたい場合は単にCSSだけの修正、状態変更のトリガーを変更したい場合はJavaScriptだけの修正を行えばよくなります。
CSSとJavaScript間で変数を渡す
クラスの追加や削除はboolean文にはいいかもしれませんが、時により複雑なデータの引き渡しが必要になります。
例えば、まず“container”があるとします。そしてユーザーが最後にそのcontainer...
0
4
0
4author:
SeleQt（セレキュト）
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。
Ads
web制作に関する情報をまとめたキュレーションサイト。デザインやプログラミングなどの技術的な内容はもとより、Web制作の領域にとどまらない注目のサービスや話題のトピックなどIT・ガジェット系の記事も豊富に更新されています。SeleQt（セレキュト）の記事『【カスタムプロパティを有効活用する Part2】JavascriptとCSSをつなげる方法』についてまとめています。
この記事は特にjavascript・LINE・UIについて書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のSeleQt（セレキュト）で全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとSeleQt（セレキュト）の記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
![ferret [フェレット]](https://upde.jp/wp/wp-content/uploads/2019/04/18de25ae45796821e12648c3628e8f7e-70x70.jpg){kind=avatar}
