或る文字列の文字数が一定数以上の場合のCSS適用

はじめまして、html/cssはほぼ理解しているのですが、
Javascriptとなるとサッパリわからず、勉強も進まない者です。

質問です。
当方、或るネットショップを構築中なのですが、
そのサイトの商品詳細ページに於ける、商品名へのCSS適用分けについて困っています。
商品名が一定数以上の文字数になると、枠を飛び出しレイアウトが崩れてしまうのです。
そこで、JavascriptによってCSSを振り分けようと考えました。
一定文字数以上の商品名にはフォントサイズを小さくするCSSを適用させたいです。

各商品ページ毎にhtml/cssを書くのではなく、テンプレートで運用するタイプです。
テンプレのhtml内では商品名は◯◯◯のようになっており、後で代入されるようです。

◯◯◯の文字数を取得→条件分岐で□文字以上の場合にのみCSSその２を適用。
（未満であればその１）

のような処理の流れと思いますが、いまいちそれを書き起せません。
これはどう書けば良いでしょうか？

どうか、お知恵をお貸しください。
よろしくお願い致します。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2012/02/17 22:10

回答がないみたいなので…

ご質問が抽象的なのに、具体的な回答を求められても書きようがないですが、せいぜい具体的に書くならば…

・選び出す対象の文字列の決め方によって、具体的な方法は変わりますが、想像するところそれぞれの商品は同じHTML構成で繰り返しの構成になっているでしょうから、その包含要素をgetElementById()などで取得して、そこから対象の要素を絞り込むことになるでしょう。
・あらかじめ商品名にclass名などが付けられていれば、上のような方法を取らなくてもclass名で直接絞り込みが可能でしょう。
・全体の親要素を取得したら、HTMLの構成に応じてその子孫要素から該当する要素を取り出します。
　例えば、親要素からgetElementsByTagName()とかあるいはchildNodesとか。
・一段階で完全に対象要素のみに絞れればその要素に対してループしながら処理をすればよいことになります。
　for(var i=0, n=nodes.length; i<n; i++){～～}　とか…
・完全には絞りきれない場合は、ループの中で判定しながら、対象要素に対して処理をすることになります。
　if(node.property === ○○ || node.property === ××){～～}　とか…

・最近のブラウザ対象でよければ、querySelectorAll()が使えるので、要素の絞込みが容易になるのではないでしょうか。

・テキストの取得は、要素内のテキストが商品名のみと確定しているのなら
　node.textContent || node.innerText　などで
　そうでない場合は、子要素のうちテキストのみを判定してゆくことになるかと…
　firstChildから順に要素を調べて、テキスト要素だったらその値を　nodeValue などで取得する。
・文字列の文字数は string.lengthで取れますので、if(leng>□){～～} else {～～} で処理をするか、設定するクラス名を
　clsNam = leng>□?" hoge":" fuga" のようなのでもよいかも。
・class名の追加は、　node.className = node.className + " hoge"　みたいな感じで。


頑張って、具体的に書いてみたけれど、基本的には抽象的な方法論となんらかわらないですね。
個々のコードの記述法、構文などについては規格を参照する方が早いかも
http://es5.github.com/
https://developer.mozilla.org/ja/JavaScript
http://www.w3.org/TR/2008/REC-ElementTraversal-2 …
http://www.w3.org/TR/#tr_Javascript_APIs

この回答への補足

質問内容が悪かったようです、ご解説頂いた内容が僕にはハイレベル過ぎてわかりません。
改めて質問したいと思います。
どうもありがとうございました。

補足日時：2012/02/22 00:54

この回答へのお礼

ご丁寧な解説、ありがとうございます。
取り急ぎ、お礼まで。

後ほど精読させて頂きます。
曖昧な質問に答えて頂き、感謝します。

お礼日時：2012/02/18 04:09