文字列で条件分岐

質問

「　%stock%　」というパラメータから吐き出される決まった文字列（"即納"や"待ち"）によってスタイルシートの背景色を自動的に変更したいと思っています。

"即納"　の場合、background-color: #red;
"待ち"　の場合、background-color: #green;

「　%stock%　」というパラメータを用いて表示させているので、
バックエンドで指定した文字列に対応して変化させたいと思っています。

すみませんがご教授ください。
よろしくお願いします。

回答No.5

x_jouet_x · ベストアンサー

個人的には<span class="stockArea">%stock%</span>の記述がとても気になるのですが・・・。
JSPやASPのようなサーバサイドで動的にHTMLを出力していませんか？

> span タグの中に class を追加した場合の記述は、どの様になりますでしょうか？

classを使用されるとJavaScriptのDOM関数では要素を取得できない(一応できますが、処理が煩雑になります)ため、私はjQueryなどのJavaScriptライブラリを使用することをオススメします。

jQueryを使用した場合は下記のように記述することで機能が実現できます。

// class="stockArea"の要素を全て取得
var stockAreas = $.find("span.stockArea");

// 上記で取得した各要素に対して
$.each(stockAreas, function(i, stockArea) {

// テキスト値が「即納」の場合
if ($(stockArea).text() == "即納") {
$(stockArea).css("backgroundColor", "red");
}

// テキスト値が「待ち」の場合
else if ($(stockArea).text() == "待ち") {
$(stockArea).css("backgroundColor", "green");
}
});

お礼

ご教授いただいた通りに記述し、無事に解決いたしました！
ありがとうございました！

またご縁があったら宜しくお願い致します。

補足

＞JSPやASPのようなサーバサイドで動的にHTMLを出力していませんか？
はい、その通りです。

＞jQueryを使用した場合は下記のように記述することで機能が実現できます。
なるほど！jQueryは既に導入済みなので、
ご教授いただいたコードで試してみたいと思います。
ご丁寧にありがとうございます。

回答No.4

yyr446

No.3の補足
-スタイルの要素名をJavascriptで直接扱う時、キャメライズ(ハイフン+英小文字を英大文字にする)が必要
　background-color　＝＞　backgroundColor
-float要素名は特別（浮動小数点のfloatと区別するため)
　style.styleFloat (IE) style.cssFloat (IE以外)
-現在適用されているスタイルの取得は、対象elementに対して、
　　element.currentStyle　　　　　　　　　　　　　　　　＜＝IEの場合　　　　
　　document.defaultView.getComputedStyle(element, '')　＜＝IE以外
で取得する
-インポートスタイルシート(@inport)のスタイルの取得は、
　　sheet.imports　で入手出来る（ただしIEのみ）
-他にも、ブラウザーによる実装の違いが間々ある。

回答No.3

yyr446

スタイルシートの背景色をJavascriptで直接一括して変更すします。
<style></style>内に指定された全セレクターの全ルールの"background-color"プロパティを一括して指定したcolorに変更します。
※スタイルシートを使ってないと意味ありません。
※Firefox3.0とIE7で動作しました。
このfunctionを%stock%から吐き出される決まった文字列によって
色を選んで、Change_Bg_Color("blue");と呼び出してやれば、
よろしかろう。

<script type="text/javascript" charset="utf-8">
<!--
function Change_Bg_Color(color){
var color;
var css = document.styleSheets;
for ( var i=0;i < css.length;i++){
if ( css[i].disabled ) continue;
var rules = css[i].rules //IE
|| css[i].cssRules; //Mozilla
for ( var j=0;j < rules.length;j++){
rules[j].style.background = color;
rules[j].style.backgroundColor = color;
}
}
}
// -->
</script>

補足

ありがとうございます。

元の html が、
<span class="stockArea">%stock%</span>
となっていて、ブラウザで出力される際には、
バックエンドで設定した文字列が下記の様に吐き出されます。
<span class="stockArea">即納</span>
<span class="stockArea">待ち</span>

ご教授いただいた jsコードを該当の html のヘッダー部分に設置し、
上記などの文字列を指定する方法がわかりません。。

>色を選んで、Change_Bg_Color("blue");と呼び出してやれば、
>よろしかろう。
この、「Change_Bg_Color("blue");」というのは、どこに記述すればよろしいでしょうか。

初歩的なご質問で、お恥ずかしいです。
宜しくお願い致します。

回答No.2

x_jouet_x

仮にHTML内に

<span>即納</span>
<span>待ち</span>
<span>即納</span>
<span>待ち</span>

とあったとすると、文字列によって背景色を変えるJavaScriptは

var spanEls = document.getElementsByTagName("span");
for (var i = 0; i < spanEls.length; i++) {
var text = spanEls[i].firstChild.nodeValue;

if (text == "即納") {
spanEls[i].style.backgroundColor = "red";
} else if (text == "待ち") {
spanEls[i].style.backgroundColor = "green";
}
}

のような感じになります。

ただしこれは「即納」や「待ち」の文字列が全て同じタグ(上記で言えば span)内に記述されていることが条件になりますが・・・。

質問内容を拝見する限り、PHPやJSPなどのサーバサイドで動的にHTMLを出力しているような気がするのですが・・・。
そうであれば、まだ違う実装の方がスマートになるように思います。

補足

ありがとうございます。

<span>即納</span>　では、同ページにて他の要素に使用している為、
都合が悪いため、span に class を下記の様に追加しようと思います。

<span class="stockArea">即納</span>
<span class="stockArea">待ち</span>

span タグの中に class を追加した場合の記述は、どの様になりますでしょうか？
恐れ入りますが宜しくお願いします。

回答No.1

yyr446

パラメータの意味が解りません。
パラメータから吐き出される決まった文字列＝＞？意味不明

補足

"即納"　の場合、background-color: #red;
"待ち"　の場合、background-color: #green;
という風に、スタイルシートを適用させたいと考えています。