jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

マイナス数値を赤色にする

概要
指定した個所の数値がマイナスの場合に赤色にします。
指定した個所の百分率が100%に達していない場合に赤色にします。

具体的には、class属性でminusColorが指定されている箇所のinnerHTMLを取得してマイナス記号から始まる場合はinnerHTMLを<span color="red"></span>で囲みます。
class属性でminusColorDivが指定されている箇所はspanではなくdivで囲みます。
使用方法
コメントを参考に実装します。
備考
サーバー側で例えばphpでclass属性にredを追加する処理だと施工箇所が多い場合に煩雑になりますが、このJavaScript設置によりスマートに実装できます。

/**
 * innerHTMLがマイナス記号で始まる場合は
 * <span class="red">や<div class="red"></div>で囲む
 *
 * usage:
 * <div class="minusColor">123</div> ---> 変化なし
 * <div class="minusColor">-123</div> --> <div class="minusColor"><span class="red">-123</span></div>
 *
 * 百分率の場合は100%に達していない場合に赤文字
 * <div class="minusColor">110%</div> --> 変化なし
 * <div class="minusColor">75%</div> --> <div class="minusColor"><span class="red">75%</span></div>
 *
 * <div class="minusColorDiv">123</div> ---> 変化なし
 * <div class="minusColorDiv">-123</div> --> <div class="minusColorDiv"><div class="red">-123</div></div>
 *
 * 百分率の場合は100%に達していない場合に赤文字
 * <div class="minusColorDiv">110%</div> --> 変化なし
 * <div class="minusColorDiv">75%</div> --> <div class="minusColor"><div class="red">75%</div></div>
 *
 * @auther ao-system
 */
(function(window,document){
	initSpan();
	initDiv();
	function initSpan() {
		var elms = document.getElementsByClassName('minusColor');
		for (var i = 0; i < elms.length; i++) {
			var elmHtml = trim(elms[i].innerHTML);
			var redFlag = false;
			if (elmHtml.substr(0,1) == '-') {
				redFlag = true;
			} else if (elmHtml.indexOf('%') != -1) {
				if (parseInt(elmHtml) < 100) {
					redFlag = true;
				}
			}
			if (redFlag) {
				addColorSpan(elms[i]);
			}
		}
	}
	function initDiv() {
		var elms = document.getElementsByClassName('minusColorDiv');
		for (var i = 0; i < elms.length; i++) {
			var elmHtml = trim(elms[i].innerHTML);
			var redFlag = false;
			if (elmHtml.substr(0,1) == '-') {
				redFlag = true;
			} else if (elmHtml.indexOf('%') != -1) {
				if (parseInt(elmHtml) < 100) {
					redFlag = true;
				}
			}
			if (redFlag) {
				addColorDiv(elms[i]);
			}
		}
	}
	function addColorSpan(elm) {
		var span = document.createElement('span');
		span.setAttribute('class','red');
		span.innerHTML = elm.innerHTML;
		elm.innerHTML = '';
		elm.appendChild(span);
	}
	function addColorDiv(elm) {
		var div = document.createElement('div');
		div.setAttribute('class','red');
		div.innerHTML = elm.innerHTML;
		elm.innerHTML = '';
		elm.appendChild(div);
	}
	function trim(str) {
		return str.replace(/^[  \t\r\n]+|[  \t\r\n]+$/g,'');	//空白部分は半角スペースと全角スペース
	}
})(window,document);
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page