JavaScriptでCSS定義せず、幅を任意の値に指定できる方法
前説
事前にCSS定義せず、入力項目の幅を任意の値に指定できる方法があったら、いいなと５，６年前からずっとそう思いました。CSS3をかなり期待していましたが、残念ながら、そのような仕様（機能）が付いていませんでした。BootstrapやUIkitなどのCSSフレームワークにも期待しておりましたが、皆さんのご存知の通り、幅を任意の値に指定できる方法はなかったです。
なぜ、その機能がほしいかというと、BootstrapなどのCSSフレームワークやプロジェクトに、事前に10pxごとのCSSを事前に用意して良かったですが、実際のWEBアプリケーションにおいて、特に、社内システムにおいて、見栄えのために、どうしても1px,2pxくらいの微調整が必要となるケースがよく、よく！あります。
この場合、事前に用意した固定幅のCSSがカバー出来ず、どうしてもstyle属性に幅の設定作業が必要となってしまいました。これは、デザインと実装の分離という理想すぎな考え方には全く関係なく、単なる、開発の効率や可読性が落ちるという筆者の考えです。
例えば、あるHTML要素の幅を104pxに微調整する必要があるというケースを考えてください。
■style属性で対応する場合
|
1 2 3 4 5 |
style="width:104px;" |
20文字を入力することに対して、
■cssで対応する場合
|
1 2 3 4 5 |
class="w104" |
12文字を入力することで済む。
1回だけ発生したら、大した差はないですが、プロジェクト全体で考えると、かなりの差が出てくると思います。
考え方
事前にCSS定義せず、入力項目の幅を任意の値に指定できる方法を実現するために、JavaScriptしかできないと考えております。
具体的に、画面のdocumentのonreadyイベントタイミングで（windowのonloadイベントタイミングで処理すると、画面ロード時に、一瞬見栄えが悪くなるケースの確率が高い）、class属性にwxx（xxは幅の値、単位がpx）を含める要素に対して、動的に幅（width）を調整するという簡単（単純）なことです。
実現
考え方がシンプルですが、いざ実現しますと、実際の状況において、２点、考慮しなければならないことがあります。
- １．同じ要素に、複数のCSSが存在した場合、wxxを複数のCSSから取り出す（識別する）こと。
- ２．同じ要素に、全く関係ないが、wから始まるCSSが存在した場合、それを外すこと。
１点目に対して、JQueryのsplit関数を使って、スペースでclass属性値を分割し、中に、wから始まるCSSを対象として処理します。
２点目ですが、実際に、wの後ろに数字であることという前提条件で、数字ではない場合、スルーします。
上記の２点を対応すれば、残りは、wの後ろに数字を該当要素のwidthに代入することだけです。JavaScriptフレームワークのJQueryを使えば、実現方法がすごく簡単だと思います。
JavaScriptでCSS定義せず、幅を任意の値に指定できる方法の実装
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// class属性にwxx（xxは幅の値、単位がpx）を含める要素に対して、wの後ろに数字を該当要素のwidthに代入する $('[class*="w"]').css("width", function(){ // １点目に対して、JQueryのsplit関数を使って、スペースでclass属性値を分割し、 var classes = $(this).attr("class").split(' '); for (var i = 0; i < classes.length; i++) { // 中に、wから始まるCSSを対象として処理します。 if( classes[i].indexOf("w") == 0 ) { var w = classes[i].replace("w", ""); w = parseInt(w,10); // wの後ろに数字であることという前提条件で if(Number.isInteger(w)){ return w; } // 数字ではない場合、スルーします else{ return false; } } } }); |
補足：2019/10/04
読者からのご指摘がありました。「Number.isInteger」はIEがサポートしないため、上記の実装はIEに動作できません。そのめ、「Number.isInteger」の代わりに、下記の関数を使えば、IEでも正常に動作できると思います。（Y.Sさん、ありがとうございました。）
|
1 2 3 4 5 6 7 |
function isInteger(num) { return (num ^ 0) === num; } |
ここまで、皆さんがあることを気づいたはずと思います。それは、CSS：「wxx」は実際にどこでも定義されていないことです。そうなんです、ここの「wxx」はあくまでJavaScriptから識別できるように、単なるキーワードに過ぎないです。（xxが意味が持っていますが、ここでこま～かく追求しないでください。）
サンプルソース
JavaScriptでCSS定義せず、幅を任意の値に指定できる方法の実装を共通jsファイルに入れて、各画面に、下記のように、要素のclass属性に、「wxx」ようなCSS（実際に定義されていない）を指定すればと思います。
|
1 2 3 4 5 |
<input type="text" class="input ime-mode-off w180" name="user_id" id="user_id" placeholder="ユーザーＩＤ" maxlength='10' > |
まとめ
実際に、筆者の場合、JQueryを依存して、共通関数を作るのは、良くないと思います。なぜなら、汎用性が落ちるのです。もっと時間をかけて、生なJavaScriptでCSS定義せず、幅を任意の値に指定できる方法を作るのは、今の筆者の状況にとって、無理なので、諦めました。皆さんは時間があれば、是非一度作ってみてください。
また、レスポンシブが流行っている今、pxではなくて、%やremのほうがもと良いではないかと思います。
それでは、JavaScriptでCSS定義せず、幅を任意の値に指定できる方法を紹介しました。また！