[송규남의 IT다이어리] 제이쿼리(jQuery) 세번째 이야기
노용철
view : 514
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기 3
안녕하세요. 중앙HTA의 송규남 강사입니다.
지난 제이쿼리 강좌에서는 셀렉터 사용방법에 대해 알아보았고 이번 제이쿼리 강좌에서는 미리 말씀드렸듯이
제이쿼리에서 CSS 제어하는 방법에 대해서 알아보도록 하겠습니다^^
자, 그럼 제이쿼리(jQuery) 세번째 강좌!! "제이쿼리에서 CSS 제어하는 방법" 시작하겠습니다~
자바스크립트에서 CSS의 속성값을 변경함으로써 많은 동적인 효과를 만들 수 있고 애니메이션 효과도 줄 수 있습니다.
제이쿼리(jQuery) 사이트의 API Documentation에서 CSS를 선택하면 CSS 사용방법이 자세히 설명되어 있습니다.
그럼 jQuery에서는 CSS를 어떻게 바쑬 수 있는지 간단한 예제로 알아보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
width:300px;
height:100px;
background-color:red;
margin:5px;
}
.mybox{
background:url('images/Lighthouse1.jpg') no-repeat;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").click(function(){
$(this).css('background-color','yellow');
});
$("#box2").click(function(){
$(this).css({
backgroundColor:'green',
border:'2px solid black'
});
});
$("#box3").click(function(){
$(this).addClass("mybox");
});
});
</script>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</body>
</html>
CSS 속성값을 변경하려면 아래와 같은 형식을 사용합니다.
$(“셀렉터”).css(“css속성명”,”설정값”);
아래 문장은 이벤트가 발생된객체(this)의 배경색상을 노랑색으로 변경합니다.
$(this).css('background-color','yellow');
아래처럼 여러개의css속성을 한번에 설정할 수 있습니다.
$(this).css({
backgroundColor:'green',
border:'2px solid black'
});
아래코드는 css에 정의된 클래스를 적용합니다.
<style>
.mybox{
background: url('images/Lighthouse1.jpg') no-repeat;
}
</style>
$("#box3").click(function(){
$(this).addClass("mybox");
});
위의 전제 코드를 작성 후 실행시켜 보세요. 각 div를 클릭하면 CSS 속성값들이 변경됩니다.
그럼 CSS 속성값을 얻어 올때는 어떻게 해야 할까요?
jQuery API문서에서 CSS 메뉴를 선택하면 아래와 같은 화면이 나옵니다.
위의 설명대로 CSS 속성값을 얻어와 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#img1{position: absolute;left:10px;top:50px}
</style>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
varleft=$("#img1").css("left"); //css의left속성을 얻어옵니다.
alert("현재left:" + left );
varmoveLeft = (parseInt(left)+50) +"px";
$("#img1").css("left", moveLeft);//현재위치에서left 50만큼 더 이동하기
});
});
</script>
</head>
<body>
<input type="button" value="이미지이동" id="btn1">
<img src="images/001.jpg"id="img1">
</body>
</html>
위의 코드를 작성 후 실행시켜 보면 버튼을 클릭시 이미지의 현재 left위치 값을 출력하고 현재위치에서
오른쪽으로 50px씩 이동됩니다.
오늘의 IT다이어리는 여기서 마무리 하겠습니다~
생각보다 어렵지 않기 때문에 여러분들도 쉽게 따라하실 수 있습니다^^
그럼 다음에 새로운 제이쿼리 이야기로 찾아 뵙도록 하겠습니다.
감사합니다 ^^
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
