
はじめまして、html/cssはほぼ理解しているのですが、
Javascriptとなるとサッパリわからず、勉強も進まない者です。
質問です。
当方、或るネットショップを構築中なのですが、
そのサイトの商品詳細ページに於ける、商品名へのCSS適用分けについて困っています。
商品名が一定数以上の文字数になると、枠を飛び出しレイアウトが崩れてしまうのです。
そこで、JavascriptによってCSSを振り分けようと考えました。
一定文字数以上の商品名にはフォントサイズを小さくするCSSを適用させたいです。
各商品ページ毎にhtml/cssを書くのではなく、テンプレートで運用するタイプです。
テンプレのhtml内では商品名は◯◯◯のようになっており、後で代入されるようです。
◯◯◯の文字数を取得→条件分岐で□文字以上の場合にのみCSSその2を適用。
(未満であればその1)
のような処理の流れと思いますが、いまいちそれを書き起せません。
これはどう書けば良いでしょうか?
どうか、お知恵をお貸しください。
よろしくお願い致します。
No.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-2 …
http://www.w3.org/TR/#tr_Javascript_APIs
この回答への補足
質問内容が悪かったようです、ご解説頂いた内容が僕にはハイレベル過ぎてわかりません。
改めて質問したいと思います。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) エクセルの書式設定の表示形式で設定した文字を文字列としてコピーしたい 1 2022/12/21 10:41
- Excel(エクセル) Excelの操作方法を教えてください!頭文字2~8文字で特定の値に返す方法 8 2022/07/14 11:26
- Excel(エクセル) エクセルの条件付き書式 個人シートを参照して集計シートに色付けしたい 1 2023/06/22 00:39
- HTML・CSS CSSファイルの日本語コメントが文字化けしてしまう 3 2022/12/26 15:50
- Excel(エクセル) エクセルの表について 3 2023/04/14 18:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
出発駅A、到着駅Bを選択すると...
-
フォームが空欄の時にフォーム...
-
ブラウザの横幅に応じてとある...
-
jsで、配列内の文章を改行する...
-
タグを教えてください。
-
セレクトを全て選択されていな...
-
変数宣言と初期値代入の場所に...
-
ラジオボタンを複数選択したと...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
iText セル内での自動改行について
-
アコーディオンメニューにする...
-
Aタグのhrefの値を取得したいの...
-
jtreeのノードを右クリックで選...
-
こんばんは。 メガメニューを今...
-
或る文字列の文字数が一定数以...
-
jQueryについて
-
javaがわかりません。。。
-
鍵盤アプリで、スマホの画面に...
-
Preorder Tree Walkとは
-
URL+URN=URI と習ったのですが...
-
innerTextは標準化されているの...
-
ノードの削除2
-
Listでintの最大値を超える要素...
-
JTextAreaを改行コードを直接書...
-
(再質問)エクセルのマクロボ...
-
collection型を引数にしたファ...
-
コンソール画面のクリアの方法
-
mとnを入力 mからnまでを加算し...
-
Google SketchUpのポータブル版...
おすすめ情報