제이쿼리 style 가져오기, 변경하기 (JQuery css() CSS수정 )

 

 

 

 

제이쿼리의 css()를 활용하면 해당 태그의 style 속성을 가져오거나 변경할 수 있습니다.

이 또한 HTML 코드를 동적으로 구성할 때 유용하게 사용됩니다.

 

현재 적용되어있는 style을 확인하거나 새로운 style 항목을 추가하거나, 기존 내용을 변경할 수도 있습니다.

 

사용법을 하나씩 확인해보도록 하겠습니다.

 

 

1. CSS 가져오기

 

테스트를 위한 div 태그를 아래와 같이 생성하였습니다.

<div id="testDiv" style="width:100px;height:100px;background-color:green;"></div>

너비와 높이에 100px를 주고 배경색을 초록색으로 지정하였습니다.

 

태그 결과

 

id가 testDiv인 이 태그의 style 값을 제이쿼리로 조회하고 싶다면 아래와 같이 사용할 수 있습니다.

 

css 뒤에 조회하고자 하는 style의 속성을 입력하면 됩니다.

$("#testDiv").css("width");

 

console로 결과를 확인해보면 100px이라고 출력되는 결과를 볼 수 있습니다.

 

위의 "width" 부분에 "background-color"을 입력한다면 

rgb(0, 128, 0) 

라는 결과를 볼 수 있을 것입니다. 

 

 

2. CSS 변경하기 

 

2-1. 한 가지 속성 변경하기

 

$("#testDiv").css("변경할 속성", "변경할 속성 값");

css() 안에 변경하고자 하는 속성과 변경할 값을 작성하여 입력하면 됩니다.

 

예시로 확인해보도록 하겠습니다.

$("#testDiv").css("width", "200px");

 

결과

css 변경 결과

 

결과에서 보이는 것처럼 기존 100px 였던 너비가 200px로 변경된 것을 확인할 수 있습니다.

 

 

기존 태그에 적용되어있는 속성만 변경할 수 있는 것은 아닙니다.

변경하고자 하는 속성이 기존 태그에 적용되어 있는 속성이라면 새로 변경될 것이고, 

기존 태그에 없는 속성이었다면 새롭게 추가되는 개념입니다.

 

 

2-2. 두 가지 이상 속성 변경하기

 

동시에 여러 개의 속성을 추가/변경할 수도 있습니다.

 

$("#testDiv").css(
	{
		"속성1": "속성 값", 
		"속성2": "속성 값"
	} 
);

 

위와 같이 Json의 형태로 데이터를 만들어서 한 번에 변경할 수도 있습니다.

 

위의 사용법을 기반으로 변경하는 테스트를 해보도록 하겠습니다.

var cssJson = {
	"width": "300px",
	"height": "20px"
	};

$("#testDiv").css(cssJson);

 

결과

여러개 변경 결과

 

 

상황에 맞는 방식으로 사용하면 더 효율적인 코딩이 될 것 같습니다.