제이쿼리로 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>
결과보기
100px 클릭
200px 클릭
300px 클릭
이렇게 제이쿼리로 css를 컨트롤 하는것이 가능합니다.
float, display, width, height, color, background, margin, padding 등등 다
가능합니다.
스스로 여러가지 css요소를 컨트롤 해보면서 연습해 보시기 바랍니다. ^^