[JQuery] CSS 변경하기

JQuery로 HTML요소의 CSS를 바꿔보겠습니다

.box {
  width: 200px;
  height: 100px;
  border: 2px solid red;
  background-color: blue;
}

간단하게 css를 작성해 줍니다

<div class="box"></div>

HTML또한 간단합니다

 

그럼 직사각형의 빨간테두리의 파란색배경을 가진 요소가 생성될거에요

 

스크립트를 작성해봅시다

$(".box").css({ 
  "border": "10px solid blue", 
  "backgroundColor": "yellow" 
});

이렇게 작성해주면 테두리가 파란색으로 10px만큼 굵어지고

 

배경은 노란색으로 바뀝니다!