Day91 - [Jquery]엘리먼트 속성 변경, css 속성 변경

이번에는 엘리먼트 속성 및 css 속성을 변경하는 방법을 알아 봅시다.

 

엘리먼트 속성 변경

엘리먼트는 다른 말로 태그 라고도 할 수 있겠습니다.

위와 같이 태그가 있을 때, 하위 속성(id, readonly 등등)을 얻어오려면 어떻게 해야 할까요?

 

바로 attr 함수를 사용하면 됩니다.

이 attr 함수는 두번째 매개변수로 값을 주면, 첫번째로 준 속성이 두번째로 준 값으로 변경 됩니다.

또한, 여러 속성들을 한번에 변경할 수도 있습니다. 아래처럼요

{} 를 이용하면 됩니다 !

 

css 속성 변경

기존에 java script 에서는 css에 접근하려면 .style 을 써서 접근을 했었습니다.

제이쿼리 에서는 css 함수를 사용합니다.

css 함수도 위의 attr 함수처럼, 첫번째 매개변수만 전달하면, 해당하는 css 속성의 값을 확인(가져오기)만 합니다.

그리고, 두번째 인자값을 전달하면, 첫번째 인자값으로 전달된 속성이 변경됩니다.

 

css 함수도 역시나 여러개의 속성을 한번에 변경할 수 있습니다.

 

그리고, java script 에서, 위의 box 들을 전부 변경해주기 위해서는 for문을 써야 하는데, 제이쿼리 에서는 위와 같이 그냥 사용하면 됩니다.

 

즉. 제이쿼리는 다중, 단일 상관없이 한번에 모든 선택자에 적용이 됩니다.