• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:或る文字列の文字数が一定数以上の場合のCSS適用)

JavaScriptを使用して文字数が一定数以上の場合にCSSを適用する方法

このQ&Aのポイント
  • JavaScriptを使用して、一定文字数以上の商品名に対してCSSを適用する方法を教えてください。
  • ネットショップの商品詳細ページで、文字数が一定数以上の場合にフォントサイズを小さくするCSSを適用したいです。
  • また、テンプレートで商品名を表示し、後から代入されるようにしたいです。どのように書けば良いでしょうか?

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答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-20081222/ http://www.w3.org/TR/#tr_Javascript_APIs

ponkingoo
質問者

お礼

ご丁寧な解説、ありがとうございます。 取り急ぎ、お礼まで。 後ほど精読させて頂きます。 曖昧な質問に答えて頂き、感謝します。

ponkingoo
質問者

補足

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

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • かなり困ってます!CSSが適用されません…

    WindowsXPでDreamweaverMXを使っています。 body {font-size: 12px;} .px10 {font-size: 10px;} という内容の外部スタイル「css.css」を作り、テンプレートに「css.css」を適用しました テンプレートを元にページをつくり、部分的に <td class="px10">文字列</td> といった感じで適用しました。 Dreamweaver上ではちゃんと適用されているのですが、ブラウザでみてみると文字が小さくなっていません。 bodyの12pxはブラウザ上でもちゃんと適用されています。 何がいけないのか、わかりません。どなたか解かるかたがいたらお知恵をかしてください。

    • ベストアンサー
    • HTML
  • ワード(文字の数が一定でない)

     ワード、A5の用紙サイズで文章を書いているのですが(A5縦、横書き)文字数が一定にならないのです。  さきほど、途中のページで「ページ設定→文字数と行数を指定」したのですが、そのぺーじはなったようですが、書き続けるとまた文字数が一定になっていません。  どうすればいいのでしょうか?

  • 特定の文字のみcssを適用するには?

    いつもお知恵拝借しておりますm(_ _)m さて、最近cssをかじり始めたところなのですが、ページ中の特定の文字(例えば「愛」)という文字のみにフォントスタイルを適用することは可能でしょうか? 現在は、「HTMLソース」の画面で「愛」という部分を「<font color="#cc0000">愛</font>」という風に置換させています。 これをcssで記述することが出来るかどうか?という質問です。 xp+ホームページビルダー10です。何とぞよろしくお願いします。

  • javascript CSS文字の大きさ

    javascriptやCSSを使ったページで文字の大きさを固定 出来るかと思いますが、これを無視することって出来る んですか? Yahoo!のブログで表示されてる文字の大きさを変えられ るって人がいるんです。でもレイアウトが崩れるらしい のですが・・

  • 同じHTMLに、違うCSSを適用させているリンクについて

    こんにちは。 同じHTMLに、違うCSSを適用させている aタグについて教えてください。 具体的には「イオブログ」というサイトのブログテンプレート一覧が表示されているページがあるのですが、 http://blog.eonet.jp/tmpparts/index.html 一覧の画像のリンクが http://blog.eonet.jp/tmpparts/sample.html?style=eoblog/az/theme.css 上記のような.cssでおわるリンクになっていました。 http://blog.eonet.jp/tmpparts/sample.htmlというHTMLファイルに、 違うCSSを適用させているようなのですが、どんな仕組みで表示されているのか(例えばCGIとか)よくわかりません。 もしおわかりのかたがいらっしゃったら、よろしくおねがいいたします。

  • CSSを使い、ページの一番下に文字列を表示する方法

    CSSを使い、ページの一番下に文字列を表示する方法 過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。 よろしければ教えてください。 外部のCSSファイルに .comment { position : absolute;bottom:5px; font-size:11px; color: black; width: 740px; } と書き込み、 HTML内で <div class="comment">一番下に表示したい文字</div> としました。 すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。 必ずページの一番下に表示するにはどうすれば良いでしょうか。 (JavaScriptとテーブルを使わない方法でお願いします) よろしくお願いします。

    • ベストアンサー
    • HTML
  • タグに囲まれた文章を、ある一定の文字数に達した場合、自動で省略する方法

    いつもお世話になっております。 JavaScriptで行えるかどうかわかりませんが、 こちらで質問させていただきます。 今回ご質問したい内容が、 「htmlのタグ(h1,tdなど)で囲まれた要素(文字)が、  こちらで指定する規定文字数を超えた場合、  越えた箇所以降を"...""(続)"などの形で省略する方法」です。 ある一定数で「打ち切る(見えなくする)」という形ですと、 運用上問題が起きてしまうため、動的に「省略」させてくれる 方法をご存知の方がいらっしゃいましたら、お手数ですが ご教授いただけないでしょうか。 よろしくお願いいたします。

  • 文字数に応じてfont-sizeを自動変更

    エクセルのセルの書式の中にある「縮小して全体を表示する」の様な ことをしたいのです。 具体的にはtableの固定幅セルのfont-sizeを、文字数に応じて自動的に 設定して、セル内で折り返しが発生しないようにしたい。 といっても、そんなに厳密でなくてもいいので、 「文字数が○文字未満ならfont-size:normal、以上ならsmall」 程度でいいんですが、これをCSSのみかCSS+JavaScriptで 実現できないものでしょうか。 文字数に応じて<td>のclassを変えればいいのでしょうが、 できれば、テキストの修正をすれば自動的に変わる様にしたいです。

  • 特定のページにのみ特定のCSSを適用させる方法

    グーグルブログ(blogger)を利用しています。 特定のタグでページをリスト表示した時のみ、特定のCSSを、あらかじめ指定しておいたdiv部にのみ適用させる。といったJavascriptのコードを教えてください。 *ちなみに、タグでページをリスト化したときのURLは以下です。(exampleは例です) http://example.blogspot.com/search/label/example/ どうぞ宜しくお願いいたします。

  • javascript html 文字数数える

    下の動作をするhtmlファイルのコードを教えてください。 テキストエディタに貼り付けて保存して拡張子をhtmlして実行すれば上記の動作をするコードという形で教えていただけるとありがたいです。 https://uji9kghkkui8uyeddikoioooojifte.web.fc2.com/index.html にアクセスし、そのページのソースの文字数を調べ、999文字以下だったら再読み込み。 1000文字以上の文字数が表示されるまで再読み込みと文字数計測を繰り返す。 文字数計測はjavascriptのDOMContentLoadedを使ってhtml読み込み直後に行ってください。 firefoxで実行します。 丸投げですみません。 なお、 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q111835240... を参考に自分でやってみようとしましたができませんでした。

このQ&Aのポイント
  • 彼の行動の意味を知りたいです。彼の行動には理由があるのか、それともただの偶然なのか気になります。
  • 彼の行動には何か裏があるのか、それともただの無邪気な行動なのか疑問です。理由を知りたいです。
  • 彼の行動には何か意味があるのか、それともただのミスコミュニケーションなのか不明です。誰か教えてください。
回答を見る