본문 바로가기

Programming/JQuery

jQuery - 스타일 관련 메소드

[ .css() ]

적용된 스타일을 가져오거나, 새로운 스타일을 적용한다.

css(propertyName)
  .css(propertyName)
css(propertyName, Value)
  .css(propertyName, value)
  .css(propertyName, function(index, value)
  .css(map)

 

$(“div”).css(“background-color”)
$(“div”).css(“background-color”, “red”);

위의 소스는 이미 적용된 스타일을 가져오는 것이고, 아래의 예는 배경 색을 빨간색으로 지정하는 소스이다.

$(“div”).css(“background-color”, function(index, value) { }); 와 같은 형식을 통해 자신이 원하는 기능을 확장하여 사용할 수 있는데, 이때 index와 value가 의미하는 것은 다음과 같다.
Index - 선택한 개체의 순서
value - 해당 개체의 현재 스타일 속성 값
이를 보면 알겠지만 한번에 개체의 스타일 값을 확인하고 변경할 수 있는 큰 장점이 있다.

 

[ .css 메소드 사용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Selector</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").css("background-color", function (index, value) {
                if (value == "rgb(255, 255, 0)") {
               return "red";
                }
                if(value == "rgb(0, 0, 255)"){
                    return "yellow";
                }
            });

        });
    </script>
</head>
<body style="padding:10px;">
    <div>
    <table>
        <tr style="background-color:rgb(255,255,0)">
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr style="background-color:blue">
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr style="background-color:yellow">
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr style="background-color:rgb(255,255,0)">
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>       
    </table>
    </div>
</body>
</html>

tr태그의 배경색이 노란색을 골라 빨간색으로 수정해주고, 파란색을 골라서 노란색으로 수정해주는 소스이다.

한가지 재미있는 것은 value == "rgb(0, 0, 255)"로 조건을 주어 적용하면 style="background-color:blue"를 찾아내는데 반하여 value == "blue"로 조건을 주면 해당 조건을 정확하게 찾아내지 못한다.

 

[ .hasClass(className) ]

클래스의 유무를 확인

.addClass( className )
  className
찾고자 하는 클래스명

클래스명이 일치하는 것이 있을 경우 true를 반환. 여러개가 같이 사용된 클래스에 속해 있을 경우에도 같은 결과를 나타낸다.

<div class=”myClass”>Content</div>
$(“div”).hasClass(“myClass”)의 경우 “true”를 반환
$(“div”).hasClass(“noClass”)의 경우 “false”를 반환

 

[ .hasClass() 사용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
   .selected { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
     $("div#result1").append($("p:first").hasClass("selected").toString());
     $("div#result2").append($("p:last").hasClass("selected").toString());
     $("div#result3").append($("p").hasClass("selected").toString());

    });
    </script>
</head>
<body style="padding:10px;">
  <p>This paragraph is black and is the first paragraph.</p>
  <p class="selected">This paragraph is red and is the second paragraph.</p>

  <div id="result1">First paragraph has selected class: </div>
  <div id="result2">Second paragraph has selected class: </div>
  <div id="result3">At least one paragraph has selected class: </div>

</body>
</html>

각 p태그의 ClassName이 selected인 것을 찾아 결과 (true/false)를 보여준다.

 

[ .addClass(className) ]

새로운 클래스를 추가

.addClass( className )
className
특정 조건에 추가할 하나 이상의 클래스 명
.addClass( function(index, class) )
function(index, class)
함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.

css() 메소드의 경우 스타일에 대한 속성 값을 제어하고, addClass()의 경우 속성 값이 아닌 className에 대한 부분만 제어 한다는 차이만 있을 뿐 거의 동일한 동작을 한다.

function의 파라미터 또한 css() 메서드에서 설명 드린 부분과 동일하다. Index는 개체의 번호를 currentClass는 value와 같이 현재 개체의 className을 반환한다.

[ .addClass(className) 사용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .textStyle { font-weight:bold; color:White; }
        .bgred { background-color : Red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("tr").addClass(function (index, currentClass) {               
                if (currentClass == "bgred") {
                    return "textStyle";
                }
            });

        });
    </script>
</head>
<body style="padding:10px;">
    <div>
    <table>
        <tr class="bgred">
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr class="bgred">
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr class="bgred">
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>       
    </table>
    </div>
</body>
</html>

class명이 bgred인 것을 찾아 해당 클래스에 textStyle 클래스를 추가한다.

 

[ .removeClass([className]) ]

특정 조건에 맞는 요소 집합에서 한개, 여러개, 모든 클래스를 제거할 수 있다.

.removeClass( [ className ] )
  className 특정 조건에 맞는 요소에서 제거될 클래스 명
.removeClass( function(index, class) )
  function(index, class)
함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.

.addClass()와는 반대로 해당 className을 삭제한다.

 

[ .removeClass() 사용 예제 ]

     <script type="text/javascript">    
        $(document).ready(function () {
            $("tr").addClass(function (index, currentClass) {                
                if (currentClass == "bgred") {
                    return "textStyle";
                }
            });
         
            $("tr:last").removeClass("textStyle");
        });
    </script>

 위의 .addClass예제에서 위의 $("tr:last").removeClass("textStyle"); 를 추가해주었다.

"tr"태그 마지막에서 "textStyle" 클래스가 적용되지 않았음을 확인 할 수 있다.

 

[ .toggleClass(className) ]

특정한 클래스의 추가/제거를 한번에 처리할 수 있다.

.toggleClass( className )
  className
선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
.toggleClass( className, switch )
  className
선택 요소 집합의 클래스를 토글할 하나 이상의(공백으로 구분되는) 클래스명
  switch 클래스가 추가되거나 삭제될 조건문
.toggleClass( function(index, class), [ switch ] )
  function(index, class)
함수에서 반환된 하나 또는 띄어쓰기로 구분된 그 이상의 클래스를 추가할 수 있다.
  switch 클래스가 추가되거나 삭제될 조건문

이 함수는 하나 이상의 클래스명을 인자로 가질 수 있다.

이 함수가 맨 처음 실행되었을 때 해당 요소에 함수에 할당된 클래스명 인자가 이미 들어가 있다면 클래스가 제거되는 것부터 시작되고, 반대로 인자로 주어진 클래스가 없다면 추가가 된다. 아래 이미지를 보면 이해가 빠를 것이다.

 

[ .toggleClass 적용 예제 ]

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="../Styles/Site.css" rel="stylesheet" type="text/css" />   
    <style>
        div,pre { background : #FFF; padding:10px; margin:10px; }
        table { border:1px solid #AAA; }
        td { border:1px solid #AAA; width:25px; height:25px; }
        .selected { font-weight:bold; color:White; background-color : Red;}       
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("td").click(function () {
                var obj = $(this);
                obj.toggleClass("selected");
            });

        });
    </script>
</head>
<body style="padding:10px;">
    <div>
    <table>
        <tr>
            <td>#1</td><td>#2</td><td>#3</td><td>#4</td><td>#5</td>
        </tr>
        <tr>
            <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td>
        </tr>
        <tr>
            <td>#11</td><td>#12</td><td>#13</td><td>#14</td><td>#15</td>
        </tr>
        <tr>
            <td>#16</td><td>#17</td><td>#18</td><td>#19</td><td>#20</td>
        </tr>
        <tr>
            <td>#21</td><td>#22</td><td>#23</td><td>#24</td><td>#25</td>
        </tr>       
    </table>
    </div>
</body>
</html>

"td"안을 클릭하게 되면 toggleClass에 의하여 "selected" 클래스가 적용이 되었다가, 다시 선택하면 적용된 "selected" 클래스가 해제됨을 확인 할 수 있다.

원본 : http://www.sqler.com/387865, http://findfun.tistory.com/entry/jQuery-API-정복-상대-좌표-구하기-position

'Programming > JQuery' 카테고리의 다른 글

jQuery checkbox 컨트롤  (0) 2012.11.20
jQuery - 폼 지원 메소드  (0) 2012.04.27
jQuery - 스타일 관련 메소드  (0) 2012.04.26
jQuery Event - Browser Events  (0) 2012.04.26
jQuery Event - .one() & .live() & .die()  (0) 2012.04.24
jQuery Event - .bind() & .unbind()  (0) 2012.04.24