jquery css() 메서드로 적용하기

css() 메소드 어떻게 사용하는가

$("태그 or .클래스 or #id").css("옵션", "옵션값");

위의 것은 어떻게 해야하는 기본이고

 

사용예) 

replyLi라는 클래스를 가진 태그를 margin-left 라는 옵션의 값을 50px를 주고싶다하면

$('.replyLi').css("margin-left", "50px");

 

라고 주면 된다.

 

그렇다면

저기있는 50px값을 조건으로 변경하려면 어떻게 하야할까?

가장 먼저 생각나는것은 

if(조건 1){
	$("태그").css("옵션", "50px");
}else if (조건 2){
	$("태그").css("옵션", "100px");
}else if (조건 3){
	$("태그").css("옵션", "150px");
}else if (조건 4){
	$("태그").css("옵션", "200px");
}
.
.
.
.
.
else if (조건 n){
	$("태그").css("옵션", "n * 50px");
}

이렇게 하드코딩이다.

쓴이도 여러 곳을 구글링을 해봤지만 원하는 코드를 얻을수 없었다.

그리고 

css() 메소드를 사용할때는 저 값을 설정하는 부분은 ""(따움표)를 사용하야해서 변수로 지정해서 계산식으로 사용할 수 없었다. 

 

그러다 우연히 하나 찾았다.

$('태그').css({"옵션 1" : 값, "옵션 2" : 값});

 

 

여기서는 값에 px를 도 없고 ""(따움표)도 없었기 때문에 변수를 이용한 값의 실시간(?) 증가가 쉬웠다

문론 위처럼 옵션이 2개가 꼭 들어가야되는것이 아니라 1개만 들어가도 문제가 없다.

예시)

$('태그').css({"옵션 1" : 값});

이상으로 css 값을 실시간으로 변경 하는법이였습니다.

 

추가) 클릭할때마다 값이 증가하는법은 jquery 공식 홈페이지에 있으니 링크 걸어두겠다.

api.jquery.com/css/