- 締切済み
CSSのクラスを振り分け
こんにちは。 クラス属性で区切られた中の文字列を読み取り、ある文字が含まれると、画像を表示する（背景画像としても可）ということがjavascriptでどのように書けばいいでしょうか。 例えば <div class="comment">今日は晴れです。</div> とあった場合、このclass="comment"内に晴れという文字があれば、「今日は晴れです。」の文字のあとに晴れの画像を表示するような。 雨という文字が含まれたら雨の画像を表示するといった具合です。 曜日ごとや日にちごとで画像を表示するというのはわかったのですが、ページの一部の文字を検索して判断させるということがわかりません。 よろしくお願い致します。
- nananana777
- お礼率60% (6/10)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＞ページの一部の文字を検索して判断させるということがわかりません。 getElementsByClass で検索するといくつか該当するサイトの１つ http://www.dustindiaz.com/getelementsbyclass/ を使えば var els = getElementsByClass('comment',null,'div'); の様にしてdiv でclass="commnet" のエレメントの配列が得られる。 els[n].innerHTML でその内部の文字列が得られるので、 indexOf を使って、含まれている文字列があるかどうかを調べることができる。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>Sample</title> <script type="text/javascript"><!-- function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (var i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; } window.onload=function(){//読込後に実行 var els = getElementsByClass('comment',null,'div'); for(var i=0;i<els.length;i++){ if(els[i].innerHTML.indexOf("晴れ")!=-1){ alert(els[i].innerHTML + "に'晴れ'が含まれている"); } } }; //--> </script> </head> <body> <div class="comment">今日は晴れです。</div> <div class="comment">今日は雨です。</div> <div class="double comment">明日は晴れです</div> <div>クラス指定無し</div> </body> </html>
関連するQ&A
- CSSのクラス指定について
CSSのクラス指定で質問させていただきます。 下記の条件で「a-クラスのついたDIV」の中で、 なおかつ一番初めに表示される[a-]の背景色だけ「赤色」にする方法を教えてください。 「a-1」「a-2」「a-3」はそれぞれ時間によって消えたりし、[x]が挿入されたりします。 以上のように条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景は赤色になります。 HTML------------------- <div class="wrapper"> <div class="x"></div> <div class="a-1"></div> <div class="a-2"></div> <div class="a-3"></div> </div> css----------------------- [class^="a-"]{}; nth-of-typeを使って指定できると思うのですが、いまいちうまくできません＞＜ ぞうぞよろしくお願いします。
- ベストアンサー
- CSS
- CSSを動的出力部分で対応させたい
以下のようなソースで、動的に出力されるコンテンツのレイアウトに対応したいと思っています。 "Cat_StyleP_img_1"、"name_"、"comment_"のクラス指定したDIVエリアは動的に出力される部分です。 --CSS-- div.mainframe_ { float: right; display: inline; overflow: hidden; } div.container_ div.contents_, div.container_ div.mainframe_ { width: 700px; } div.CategoryStyleP_ { width:100%; overflow: hidden; padding-bottom: 20px; } div.CategoryStyleP_Line_ { width: 102%; overflow: hidden; padding: 10px 0 10px 10px; margin-bottom: 10px; } div.CategoryStyleP_Item_ { float: left; display: inline; width: 340px; margin-right: 10px; padding: 10px 0; overflow: hidden; background: #fff; } div.CategoryStyleP_Item_ .Cat_StyleP_img_ { float: left; display: inline; width: 140px; } div.CategoryStyleP_Item_ .Cat_StyleP_main_ { float: left; display: inline; width: 180px; padding-right: 10px; } div.CategoryStyleP_Item_ h3.name_ { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #cfcfcf; font-size: 14px; font-weight: bold; } div.CategoryStyleP_Item_ div.comment_ img { margin: 0 0 10px 0; } --html-- <body > <div class="container_"> <div class="contents_"> <div class="mainframe_"> <div class="CategoryStyleP_"> <div class="CategoryStyleP_Line_ heightLineParent"> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像1"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルA</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 </div> </div> </div> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像2"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルB</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 コメント、コメント。</div> <span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span></div> </div> </div> </div> </div> </div> </div> </body> このレイアウトで出力する画像が無かった場合、"Cat_StyleP_img_1"のDIV自体が出力されない 仕様なのですが、画像の出力がない場合に、その他2つ（"name_"、"comment_"）の要素を横に広げて、 画像の出力が無かった場合の空きスペースが埋まるようにしたいのですが、何か良い方法はありませんでしょうか？ JavaScriptではなくCSSで何とか対応したいと考えています。 お助け下さい、何卒宜しくお願いします。
- 締切済み
- CSS
- CSSを使い、ページの一番下に文字列を表示する方法
CSSを使い、ページの一番下に文字列を表示する方法 過去ログや検索で調べてみたのですが、いまいちよくわかりませんでした。 よろしければ教えてください。 外部のCSSファイルに .comment { position : absolute;bottom:5px; font-size:11px; color: black; width: 740px; } と書き込み、 HTML内で <div class="comment">一番下に表示したい文字</div> としました。 すると、スクロールのあるページでは中途半端なところに文字が表示されてしまいます。 必ずページの一番下に表示するにはどうすれば良いでしょうか。 （JavaScriptとテーブルを使わない方法でお願いします） よろしくお願いします。
- ベストアンサー
- HTML
- CSSで画像表示のやり方を教えてください
初めまして、ＣＳＳを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか？ 今の状態はこんな感じです。 間違っていますか？ ＨＴＭＬファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- html css div
スタイルシートCSSで以下のような、表示を表現するには、どうすれば良いですか？ <table>ではなく、<div>でマークアップしたいです。 よろしくお願いします。 文字Aを<span>で背景色をclassで指定しても、周りに隙間ができてしまいます。
- ベストアンサー
- HTML
- CSSについて教えてください。
携帯向けのサイトを作っています。 contentの文字列が画面からはみ出るので指でスワイプした分だけ スクロールしたいのですがCSSでできますでしょうか？ スクロールバーは表示させたくないのでCSSで無効にしてあります。 どうかよろしくお願いいたします。 <div class="box"> <div class="content"> あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ あああああああああああああああああああ </div> </div>
- ベストアンサー
- CSS
- CSSを使って、背景色をブラウザの縦100％につづかせたいです。
こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100％になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 （ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。） --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100％; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>
- 締切済み
- ホームページ作成ソフト
お礼
ありがとうございました。 うまくいきました。素早い回答もありがとうございました。