jQuery API 정복 - 속성을 제어, css()

.css()

원문 링크 http://api.jquery.com/css/

함수들

css( propertyName )

.css( propertyName )

css( propertyName , value )

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

.css( propertyName )Returns : String

개요 : 일치하는 요소들 중에 첫번째 요소의 속성값을 반환합니다.

.css( propertyName )
propertyName CSS 속성값

.css() 함수는 첫번째 element의 속성값을 알아내는 아주 좋은 함수입니다. 특히 여러 속성들을 다르게 취급하는 브라우저들을 대상으로 할때 아주 유용합니다. ( Internet Explorer의 currentStyle 와 runtimeStyle 속성들을 비교하기 위한 표준 기반(standard-based)의 브라우져의 getComputedStyle() 함수입니다.) 예를 들어, Internet Explorer의 DOM 표현에서 float 속성은 styleFloat로 다루는 반면, W3C 표준을 따르는 브라우져에서는 cssFloat로 사용할 수 있습니다. .css() 함수는 이런 경우에 동일한 결과를 나타내도록 구성되어 있는 것입니다. 예를 들어, float 속성값을 가져오려면 아래와 같이 스크립트를 작성하면 됩니다.

$('div.left').css('float');
$('div.left').css('cssFloat');
$('div.left').css('styleFloat');

또한, jQuery는 두 단어 이상으로 표현되는 CSS나 DOM 도 다룰 수 있습니다. jQuery는 .css('background-color') 와 .css('backgroundColor')를 사용하여 동일한 결과를 만들어 낼 수 있습니다. 다른 브라우져에서도 #FFF, #ffffff, and rgb(255,255,255) 와 같이 문자 표현이 동일하지 않지만 논리적으로는 같은 CSS 컬러값을 반환하게 됩니다.

줄임말로 표현된 CSS 속성표현은 지원하지 않습니다.(e.g. margin, background, border) 즉, margin 에 대한 정보를 얻기를 원한다면 다음과 같이 사용해야 합니다. $(elem).css('marginTop') 와 $(elem).css('marginRight') 와 같은 코드가 필요합니다..

예 제
박스를 클릭하면 색깔값을 반환합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
div { width:60px; height:60px; margin:5px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>

<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  var color = $(this).css("background-color");
  $("#result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");
});

</script>

</body>
</html>

미리보기

색깔 rgb 값 반환됩니다.

.css( propertyName, value )Returns : jQuery

개요 : 일치하는 요소들에 하나 이상의 CSS 속성을 추가시킬 수 있습니다.

.css( propertyName, value )
propertyName CSS 속성명
value CSS 속성값
.css( propertyName, function(index, value) )
propertyName CSS 속성명
function(index, value) index에 해당하는 위치에 추가할 속성값
..css( map )
map 속성명과 속성값으로 구성된 세트(map)

.prop() 함수나 .css() 함수를 사용하면 빠르고 쉽게 새로운 속성을 추가할 수 있습니다. 이 함수들은 속성명과 속성값을 별개의 인자로 다룰 수 있습니다. 또한 key와 value를 한쌍으로 single map을 사용할 수도 있습니다.(이 부분은 우리나라 말로 번역하기가 어렵네요.)

jQuery는 두 단어 이상으로 표현되는 CSS나 DOM 도 다룰 수 있습니다.(위에 쓴말을 왜 똑같이 쓰는지.. ㅡㅡ;) 예를 들면, jQuery는 .css({'background-color': '#ffe', 'border-left': '5px solid #ccc'}) 와 .css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'}) 두 스크립트의 결과를 보여줍니다.

.css() 함수를 set 하는 용도(딱히 한글용어가 쿨럭;;)로 사용될 때, jQuery는 style 속성을 편집하게 됩니다. $('#mydiv').css('color', 'green') 스크립트는 document.getElementById('mydiv').style.color = 'green'와 같습니다. (이 뒤에 2문장이 더 있는데 의미 파악이 정확하지가 않아 삭제합니다.)

jQuery 1.6에 와서, .css() 함수는 .animate()함수에서 사용되는 relative 속성값을 사용할 수 있게 되었습니다. Relative 속성값은 += 또는 -= 같은 사용법으로 현재 값을 증가시키거나 감소시킬수 있습니다. 만약 어떤 요소의 padding-left 가 10px 이었다면, .css( "padding-left", "+=15" ) 의 스크립트를 적용하면 padding-left 값은 25px가 되게 됩니다.

jQuery 1.4부터는 .css() 인자로 속성값을 반환하는 함수할 수 있게 되었습니다.

아래 예는 일치하는 요소의 width 값을 증가시키는 스크립트입니다.

$('div.example').css('width', function(index) {
  return index * 50;
});

Note: 만약 인자로 사용된 함수에서 반환한 값이 없거나 (ie. function(index, style){})) undefined 를 반환한다면, 현재 상태를 변화시키지는 않습니다. 이것은 선택적으로 특정 기준을 적용하고 싶을때 유용한 방법이 됩니다.

예 제
mouseover 이벤트 시 p 태그 안의 폰트색을 변화시킵니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <p>Just roll the mouse over me.</p>

  <p>Or me to see a color change.</p>
  
<script>
  $("p").mouseover(function () {
    $(this).css("color","red");
  });
</script>

</body>
</html>

미리보기

예 제
id=#box 의 width를 200 pixel 만큼 증가시킵니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  #box { background: black; color: snow; width:100px; padding:10px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <div id="box">Click me to grow</div>
  
<script>
  $("#box").one( "click", function () {
    $( this ).css( "width","+=200" );
  });
</script>

</body>
</html>

미리보기

예 제
p 태그 안의 텍스트를 클릭하면 강조합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; font-weight:bold; cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<p>
  Once upon a time there was a man
  who lived in a pizza parlor. This
  man just loved pizza and ate it all 
  the time.  He went on to be the
  happiest man in the world.  The end.
</p>
<script>
  var words = $("p:first").text().split(" ");
  var text = words.join("</span> <span>");
  $("p:first").html("<span>" + text + "</span>");
  $("span").click(function () {
    $(this).css("background-color","yellow");
  });

</script>

</body>
</html>

미리보기

텍스트를 클릭해 보세요. 노란색 배경이 생깁니다.

예 제
마우스를 올리면 새로운 스타일을 적용합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:green; }
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <p>Move the mouse over a paragraph.</p>
  <p>Like this one or the one above.</p>

<script>
  $("p").hover(function () {
    $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
  }, function () {
    var cssObj = {
      'background-color' : '#ddd',
      'font-weight' : '',
      'color' : 'rgb(0,40,244)'
    }
    $(this).css(cssObj);
  });
</script>

</body>
</html>

미리보기

텍스트에 마우스를 올려보세요. 노란색 배경이 생기고 텍스트가 굵어집니다.

예 제
클릭할때 마다 빨간 배경색이 확장됩니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width: 20px; height: 15px; background-color: #f33; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <div>click</div>
  <div>click</div>

<script>
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }

    });
  });
</script>

</body>
</html>

미리보기

텍스트에 마우스를 올려보세요. 노란색 배경이 생기고 텍스트가 굵어집니다.

대체적으로 내용이 많아서 해석이 바보같네요. 킁... 중요한 함수인데 설명이 좀 그렇습니다. 예제를 보시면 그리 어렵지 않으실 것 같네요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

저작자표시 비영리 변경금지 (새창열림)

'프로그래밍 > jQuery' 카테고리의 다른 글

jQuery API 정복 - padding 포함 높이 제어, innerHeight() (0)	2011.11.22
jQuery API 정복 - 요소 높이 제어, height() (0)	2011.11.22
jQuery API 정복 - 텍스트 비우기, empty() (0)	2011.11.22
jQuery API 정복 - 요소 제거, detach() (2)	2011.11.22
jQuery API 정복 - 요소 복사하기, clone() (0)	2011.11.22
jQuery API 정복 - 앞에 추가하기, before() (1)	2011.11.22
jQuery API 정복 - 새로운 요소 추가, appendTo() (4)	2011.07.26
jQuery API 정복 - 마지막 자식 요소 추가, append() (6)	2011.07.20

즐거움을 찾자 Find Fun!!

jQuery API 정복 - 속성을 제어, css()

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

jQuery API 정복 - 속성을 제어, css()

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바