반응형
[jQuery] css 메소드
cssStyle-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>css 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // jQuery("선택자").css("스타일속성") => 스타일 속성값을 반환 받는 메소드 alert("글자색상 = " + jQuery("#displayDiv").css("color")); // jQuery("선택자").css("스타일속성","변경값") => 스타일 속성값을 변경 하는 메소드 jQuery("#displayDiv").css("color", "white"); jQuery("#displayDiv").css("background-color", "red"); jQuery("#displayDiv").css("font-size", "1.5em"); }); </script> </head> <body> <h1>css 메소드</h1> <hr/> <div id="displayDiv">스타일 연습</div> </body> </html> |
출력결과 |
cssStyle-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>css 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // jQuery("선택자").css("스타일속성") => 스타일 속성값을 반환 받는 메소드 alert("글자색상 = " + jQuery("#displayDiv").css("color")); // 선택자를 이용한 메소드 연속 호출 => Chain 기능 jQuery("#displayDiv") .css("color", "white") .css("background-color", "blue") .css("font-size", "1.5em"); }); </script> </head> <body> <h1>css 메소드</h1> <hr/> <div id="displayDiv">스타일 연습</div> </body> </html> |
| 출력결과 |
| cssStyle-3.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>css 메소드</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { // jQuery("선택자").css("스타일속성") => 스타일 속성값을 반환 받는 메소드 alert("글자색상 = " + jQuery("#displayDiv").css("color")); // 하나의 선택자로 전체 변경 jQuery("#displayDiv").css({ "color" : "white" , "background-color" : "green" , "font-size" : "1.5em" }); }); </script> </head> <body> <h1>css 메소드</h1> <hr/> <div id="displayDiv">스타일 연습</div> </body> </html> |
출력결과 |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] text 메소드와 html 메소드 (0) | 2015.12.20 |
|---|---|
| [jQuery] attr 메소드 (0) | 2015.12.20 |
| [jQuery] each 메소드 (0) | 2015.12.20 |
| [jQuery] eq 선택자 (0) | 2015.12.20 |
| [jQuery] NOT 선택자 (0) | 2015.11.16 |
