- ベストアンサー
JavaScriptを使用して文字数が一定数以上の場合にCSSを適用する方法
- JavaScriptを使用して、一定文字数以上の商品名に対してCSSを適用する方法を教えてください。
- ネットショップの商品詳細ページで、文字数が一定数以上の場合にフォントサイズを小さくするCSSを適用したいです。
- また、テンプレートで商品名を表示し、後から代入されるようにしたいです。どのように書けば良いでしょうか？
- ponkingoo
- お礼率92% (12/13)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
回答がないみたいなので… ご質問が抽象的なのに、具体的な回答を求められても書きようがないですが、せいぜい具体的に書くならば… ・選び出す対象の文字列の決め方によって、具体的な方法は変わりますが、想像するところそれぞれの商品は同じ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-20081222/ http://www.w3.org/TR/#tr_Javascript_APIs
お礼
ご丁寧な解説、ありがとうございます。 取り急ぎ、お礼まで。 後ほど精読させて頂きます。 曖昧な質問に答えて頂き、感謝します。
補足
質問内容が悪かったようです、ご解説頂いた内容が僕にはハイレベル過ぎてわかりません。 改めて質問したいと思います。 どうもありがとうございました。