jQuery CSS - 스타일 관련 메서드에 대하여
HTML 문서의 스타일 제어하기
jQuery에서는 역시나 굉장히 많은 API를 제공 하고 있습니다만, 여기서는 자주 사용되는 API를 중심으로 설명을 드리고, 필요에 따라서 부수적인 API에 대해 이야기 하도록 하겠습니다.
우선 스타일을 직접적으로 제어하는데 사용되는 API를 알아 보도록 하겠습니다.
.css()
적용된 스타일을 가져오거나, 새로운 스타일을 적용합니다.
$(“div”).css(“background-color”)의 경우 해당 선택된 개체의 배경 색상을 가져옵니다.
기본적인 표현 식은 스타일에서 사용되는 구문을 동일하게 사용하시면 됩니다.
새로운 스타일을 적용하고 싶을 경우에는 css(propertyName, value) 메서드를 사용하시면 됩니다. 앞에서 진행한 예제를 보시면 대부분의 경우 이 메서드를 사용해서 강조하고 있습니다. 사용법 또한 스타일 관련 문법만 알고 계시면 어렵지 않게 활용 가능합니다.
붉은색 배경을 넣고 싶을 경우 $(“div”).css(“background-color”, “red”); propertyName에는 적용할 스타일의 이름과 value에는 원하는 값을 넣기만 하면 됩니다.
$(“div”).css(“background-color”, function(index, value) { }); 와 같은 형식을 통해 자신이 원하는 기능을 확장하여 사용할 수 있습니다. function의 파라미터를 살펴보면 index와 value가 존재하고 있습니다. Index의 경우 선택한 개체의 순서이며, value는 해당 개체의 현재 스타일 속성값입니다. 이 형식을 사용하면, 한번에 개체의 스타일 값을 확인하고 변경할 수 있는 큰 장점이 있습니다.
다음 예제를 통해 간단히 알아 보도록 하겠습니다.
<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"; } }); }); </script> </head> <body style="padding:10px;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <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> <td>#6</td><td>#7</td><td>#8</td><td>#9</td><td>#10</td> </tr> <tr style="background-color:rgb(255,255,0)"> <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>
HTML에서 노랑색으로 강조한 부분이 붉은 색으로 변경 되었습니다. Function의 경우 파라미터가 하나이면 무조건 해당 개체의 index가 반환되니 이점 참고 하시기 바랍니다. Index, value에 대한 값이 필요 없을 경우는 파라미터를 사용하지 않으셔도 무방합니다.
.hasClass(className)
선택된 개체에 className과 동일한 클래스가 존재 하는지에 대한 결과를 true/false 로 반환합니다.
<div class=”myClass”>Content</div>
$(“div”).hasClass(“myClass”)의 경우 “true”를 반환합니다.
$(“div”).hasClass(“noClass”)의 경우 “false”를 반환합니다.
.addClass()
새로운 클래스를 추가하는 메서드입니다.
$(“div”).addClass(“className”) 셀렉터를 통해 가져온 개체에 className이라는 클래스를 추가합니다.
이 부분은 더 드릴만한 설명이 없으므로 function 파라미터를 통한 클래스 제어에 대해 자세히 알아 보도록 하겠습니다.
앞서 설명 드린 “css(propertyName, function(index, value) {})”와 비슷한 형식을 보이는 걸로 봐서는 하는 역할도 비슷할 것이라 생각 하시면 빙고 ~~
css() 메서드의 경우 스타일에 대한 속성값을 제어하고, addClass()의 경우 속성값이 아닌 className에 대한 부분만 제어 한다는 차이만 있을 뿐 거의 동일한 동작을 합니다. function의 파라미터 또한 css() 메서드에서 설명 드린 부분과 동일합니다. Index는 개체의 번호를 currentClass는 value와 같이 현재 개체의 className을 반환합니다.
다음 예제를 통해 addClass(function(index, currentClass))의 사용법을 알아 보도록 하겠습니다.
<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;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <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>
선택한 개체 중에 클래스 명이 “bgred”일 경우 해당 개체에 “textStyle”이라는 클래스를 추가 하였으며, 결과 화면에서 보듯이 하얀색의 글자와 bold 속성이 적용 되었습니다.
.removeClass()
.addClass()와는 반대로 해당 className을 삭제 합니다.
.addClass()와 동작하는 형태와 사용법은 완전히 동일 하며, 반대로 선언한 클래스를 삭제 한다는 것만 알아 두시면 됩니다.
.toggleClass()
선택한 개체를 마치 스위치처럼 껏다(removeClass()), 켯다(addClass())하는 기능을 하는 메서드입니다.
$(“div”).toggleClass(“myClass”)
선택한 개체에 myClass가 적용 시 myClass를 삭제를 하고, 적용되지 않은 경우에는 myClass를 적용하는 역할을 합니다.
toggleClass(className, switch)의 두 번째 파라미터인 switch(Boolean)값을 통해 사용자가 toggle상태를 지정할 수 도 있습니다. true 라면 addClass()와 같은 효과를 반대로 false라면 removeClass()와 같은 효과를 나타냅니다.
이 메서드 역시 function을 통한 확장된 제어가 가능합니다.
모양을 보아 하니 역시나 이전 메서드에서 설명 드린 부분과 동일한 형태를 취하고 있는걸 확인 할 수 있습니다.
아마도 function의 역할은 toggle할 클래스명의 리턴이 되겠다라는 생각이 팍팍 듭니다.
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;"> <h2>jQuery 시작 Selector</h2> <p>jQuery에 대한 자세한 내용을 보려면 jquery.com 을 방문하세요.</p> <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</t
댓글 1개