[Javascript] 값의 양성, 음성에 따라 글자색 변경하기

ajax 로 대량의 데이터를 불러와서 화면에 출력을 할 때 스타일을 지정을 해주는게 적용이 잘 안 될 때도 있고 해서 어쩔 수 없이 스타일로 지정을 해주는데 일일히 조건을 다 넣자니 복잡해져서 좀 간단한 방법을 찾아봤더니 있네요.

 

우선 ajax 로 데이터 불러오는 건

2022.07.06 - [Programming/Javascript & jQuery] - [jQuery] AJAX 기본 사용법

[jQuery] AJAX 기본 사용법

제 이전 글을 보시면 될 거 같고요

 

데이터를 불러왔고 해당 데이터를 for 문을 통해 화면에 여러줄 출력하는데 특정 항목의 값에 따라 색을 다르게 주고 싶을 때 쓰면 그래도 손이 덜 가는 방법입니다.

이상하게 jquery로 append 하거나 하면 css 파일에 지정해둔 스타일이 적용이 안 되는게 많더군요.

 

각설하고

 

var tc1 = '#000000';
var tc2 = '#000000';
var tc3 = '#000000';

for (var i=0; i<data.length; i++) {
	tc1 = data[i].val1 < 0 ? '#ff0000' : '#0000ff';
    tc2 = data[i].val2 < 0 ? '#ff0000' : '#0000ff';
    tc3 = data[i].val3 < 0 ? '#ff0000' : '#0000ff';
    
    echo '<div style="' + tc1 + '">' + data[i].val1 + '</div>';
    echo '<div style="' + tc2 + '">' + data[i].val2 + '</div>';
    echo '<div style="' + tc3 + '">' + data[i].val3 + '</div>';
}

이런식으로 스타일로 지정해서 사용하시면 됩니다.