- 締切済み
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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました。 うまくいきました。素早い回答もありがとうございました。