No.5ベストアンサー
- 回答日時:
個人的には<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
- 回答日時:
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
- 回答日時:
スタイルシートの背景色を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
- 回答日時:
仮に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 を追加した場合の記述は、どの様になりますでしょうか?
恐れ入りますが宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- Visual Basic(VBA) 特定の文字を簡単な操作で半角スペースに変換するか削除したい 2 2022/11/01 10:35
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- Visual Basic(VBA) エクセルVBA ダブルクリックしたら色反転を指定したセルのみにしたい 2 2022/04/06 12:52
- Excel(エクセル) Excelにて、フォルダ内のTextファイルをマクロで統合すると文字化けしてしまう時の解消コード 4 2023/01/01 07:32
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- Visual Basic(VBA) VBA 「,」・空白・カタカナ等の複数条件のマクロ 2 2023/08/23 11:57
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS スマホ表示用のwebページ、style.cssでは表の中の文字 font-size は指定できない? 1 2023/03/27 18:57
- Excel(エクセル) エクセルの数式で教えてください。 1 2023/02/08 09:05
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
配列の大括弧と丸括弧はどう違う?
-
javascript 特定のタグのidの存...
-
任意の座標をクリックさせるには
-
Click回数を数え、規定された回...
-
onclickを使わずにイベント処理...
-
javascript の 命令文の記述で...
-
WordPressのコンタクトフォーム...
-
HTML:Tableタグに対し、JavaScr...
-
javascriptでスロットゲームを...
-
【Tabキー】特定の範囲内だけで...
-
google apps scriptの終了のさせ方
-
idを使わずにonclickで自身の要...
-
Boolean型配列中のTrueの有無を...
-
JavaScriptで決まった「時刻」...
-
C#テキストボックスの文字を配...
-
JavaScript window.openで開く...
-
関数でy=g(x)のgとは何の略です...
-
jspからjavascriptの変数引継ぎ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
[初心者]javascriptのfor文でな...
-
ActiveXobjectが作成できない
-
任意の座標をクリックさせるには
-
appendChildがieだとできない??
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onclickを使わずにイベント処理...
-
アンカークリックのイベントを...
-
javascriptでスロットゲームを...
-
画像上のクリックした場所が分...
-
javascriptでCSVを呼出しvlookup
-
javascriptで編集可能不可能の...
-
Click回数を数え、規定された回...
-
子画面からwindow.openを開いた...
おすすめ情報