블로그 이미지
푸_른_빛

카테고리

꿈을 향하여 (73)
일상 (9)
여행 (16)
영화 (4)
(19)
APPLE (3)
맛집 (4)
프로그램 (6)
etc (12)
Total126,633
Today11
Yesterday14

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 상세보기 버튼 클릭시




Posted by mino 푸_른_빛

댓글을 달아 주세요

  1. 2015.03.24 06:03 스트레인저  댓글주소  수정/삭제  댓글쓰기

    잘봤습니다~ 기초적인 공부에 도움이 됬어요 :)

  2. 2018.06.22 13:14 지나가는 낭인  댓글주소  수정/삭제  댓글쓰기

    좋은자료 감사합니다!

최근에 달린 댓글

최근에 받은 트랙백

글 보관함