이번장에서는 jQuery css() 구문에 대해서 알아보겠습니다.
css() 는 선택된 요소에 대해서 하나 또는 그 이상의 속성값을 줄 수 있습니다.
css("propertyname");
css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});
propertyname 속성값을 의미하고 css 속성에 하나가 아닌 여러개가 들어갈수 있음을 나타냅니다.
CSS() 관련예제
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","#FFFF00");
});
});
</script>
</head>
<body>
<h2>머릿글 입니다.</h2>
<p style="background-color:#ff0000">첫번째 구문입니다.</p>
<p style="background-color:#00ff00">두번째 구문입니다.</p>
<p style="background-color:#0000ff">세번째 구문입니다.</p>
<p>마지막 구문입니다.</p>
<button>클릭하세요!</button>
</body>
</html>
// 이미지를 보면 알겠지만 빨강,초록,파랑 등 백그라운드의 색상이 버튼을 클릭하면 노란 백그라운드로 바뀌는것을 보여줍니다.
즉 $("p").css("background-color","#FFFF00"); p 태그에서 css에 속성값을 주어 백그라운드 색상을 변경한 것입니다.
$("p").css({"background-color":"#FFFF00","font-size":"200%"});
여러개의 css 속성값도 변경할 수 있습니다. 구문을 보시면 백그라운드 색상을 노란색으로 변경하고, 폰트의 크기를 200% 늘리는 것을 말합니다. 다앙햐게 속성값을 줄수 있기 때문에 실전에서도 많이 사용됩니다.
다음장에서는 jQuery html의 마지막 장인 jQuery Dimensions에 대해서 알아보겠습니다.
'jQuery > jQuery HTML' 카테고리의 다른 글
| jQuery - Dimensions(면적,넓이) (0) | 2013.05.24 |
|---|---|
| jQuery CSS Classes (0) | 2013.05.23 |
| jQuery - Remove Elements (0) | 2013.05.22 |
| jQuery Add Elements (0) | 2013.05.21 |
| jQuery html Set text(), html(), val(), attr() (0) | 2013.05.20 |
