電子書籍の厳選無料作品が豊富！

CSSのクラスを振り分け

締切済

  • 質問者：nananana777
  • 質問日時：
  • 回答数：1件

こんにちは。
クラス属性で区切られた中の文字列を読み取り、ある文字が含まれると、画像を表示する（背景画像としても可）ということがjavascriptでどのように書けばいいでしょうか。

例えば
<div class="comment">今日は晴れです。</div>
とあった場合、このclass="comment"内に晴れという文字があれば、「今日は晴れです。」の文字のあとに晴れの画像を表示するような。
雨という文字が含まれたら雨の画像を表示するといった具合です。

曜日ごとや日にちごとで画像を表示するというのはわかったのですが、ページの一部の文字を検索して判断させるということがわかりません。

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

＞ページの一部の文字を検索して判断させるということがわかりません。


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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました。

うまくいきました。素早い回答もありがとうございました。

通報する
お礼日時：2006/07/13 11:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報