01 jquery 제어.zip
프로그램을 개발하다가 CSS를 이용해 특정 객체를 제어할 필요성을 느낄 때가 있다.
ex)
1. 버튼을 클릭 시 특정 내용이 표시되게 하거나 아니면 보이지 않게 가릴 필요성이 있을 때
2. 버튼 크기 조정
3. 특정 글씨 색 변경
jQuery에서 제공하는 API를 이용해 HTML의 CSS를 변경할수있다.
jQuery에서 CSS 속성값 확인 및 변경 API
CSS
속성값 확인
$("변경하려는 대상").css("속성");
CSS
속성값 변경
$("변경하려는 대상").css("속성","속성값"); |
DIV 표시 사용 예제
<html>
<head>
<title>jQuery DIV 표시</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//<!--
function viewDiv(idx)
{
if(idx == 1)
{
$(".div1").css("display","");
$(".div2").css("display","none");
$(".div3").css("display","none");
}
else if(idx == 2)
{
$(".div1").css("display","none");
$(".div2").css("display","");
$(".div3").css("display","none");
}
else if(idx == 3)
{
$(".div1").css("display","none");
$(".div2").css("display","none");
$(".div3").css("display","");
}
else
{
$(".div1").css("display","");
$(".div2").css("display","");
$(".div3").css("display","");
}
}
//-->
</script>
</head>
<body>
<div style="display:block">
<input type="button" value="전체보기" onclick="viewDiv()"/><br/>
<input type="button" value="div1 상세보기" onclick="viewDiv(1)"/><br/>
<div class="div1" style="width:300px;height:30px;background-color:#111;">
<p style="color:#FFFFFF;font-weight:bold">DIV1</P>
</div>
<input type="button" value="div2 상세보기" onclick="viewDiv(2)"/><br/>
<div class="div2" style="width:300px;height:30px;background-color:#222;">
<p style="color:#FFFFFF;font-weight:bold">DIV2</P>
</div>
<input type="button" value="div3 상세보기" onclick="viewDiv(3)"/><br/>
<div class="div3" style="width:300px;height:30px;background-color:#333;">
<p style="color:#FFFFFF;font-weight:bold">DIV3</P>
</div>
</div>
</body>
</html>
|
동작
1. 전체보기 버튼 클릭시
2.DIV1 상세보기 버튼 클릭시
3.DIV2 상세보기 버튼 클릭시
4.DIV3 상세보기 버튼 클릭시
