PinkCoding

CLASS web

jQuery

CSS 제어하기

제이쿼리로 css값 변경하기

제이쿼리를 이용해서 css값도 변경이 가능합니다.

참 많은 기능이 있죠?

예를 들어 가로값이 100px인 div를 500px로 변경이 가능 합니다. 제이쿼리를 이용해서요.!!!!

그럼 말로만 하지 말고 해보겠습니다.

$('SELECTOR').css();

지금 이 강좌를 보고 계신분은 핑크코딩에서 html css강좌를 거쳐서 지금 이 제이쿼리 강좌까지도 보고 계시기 때문에 css를 알고계신다고 생각하고 강좌를 하겠습니다.

css에서 글씨 색값을 지정하려면 이렇게 하죠?

selector{color:red}

그렇다면 제이쿼리 에서는?

$('SELECTOR').css('color','red');

위와 같이 표현해 줍니다. css('CSS속성','값');

그럼 예제를 통하여 익혀 보도록 합시다.

상황 1

100px,200px,300px이라는 문구를 만들어서 클릭시 특정div가 100px,200px,300px로 가로값이 변하는것을 만들어 보죠^^

우리는 이제 변수선언에 대해서도 공부했기 때문에 이제부터는 변수를 선언해서 공부를 해보도록 합시다.

$(function(){
  var box = $('.box');
  var btn_100px = $('.btn_100px');
  var btn_200px = $('.btn_200px');
  var btn_300px = $('.btn_300px');

  btn_100px.click(function(){
    box.css('width','100px');
  });
  btn_200px.click(function(){
    box.css('width','200px');
  });
  btn_300px.click(function(){
    box.css('width','300px');
  });
});

위와 같이 소스를 작성 하면 되겠죠? ^-^

그럼 box의 크기를 가로 50px,세로 20px, 배경 yellow로 해봅시다.

css source :
.box{width:50px;height:20px;background:yellow}
.btn{cursor:pointer}
html source :
<div class="box"></div>
<p class="btn btn_100px">100px</p>
<p class="btn btn_200px">200px</p>
<p class="btn btn_300px">300px</p>

실전 예제를 통해서 테스트 및 익혀봅시다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<style>
.box{width:50px;height:20px;background:yellow}
.btn{cursor:pointer}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  var box = $('.box');
  var btn_100px = $('.btn_100px');
  var btn_200px = $('.btn_200px');
  var btn_300px = $('.btn_300px');
  btn_100px.click(function(){
    box.css('width','100px');
  });
  btn_200px.click(function(){
    box.css('width','200px');
  });
  btn_300px.click(function(){
    box.css('width','300px');
  });
});
</script>
</head>
<body>
<div class="box"></div>
<p class="btn btn_100px">100px</p>
<p class="btn btn_200px">200px</p>
<p class="btn btn_300px">300px</p>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.