안녕하세요. 명월입니다.
이번 포스트에서는 Jqeury 중에서 CSS 스타일과 관계된 함수를 공부하겠습니다.
CSS 관련 함수는 말 그대로 Jquery 내에서 CSS의 값을 취득하거나 설정하는 함수입니다. CSS를 설정하는 함수가 있고, 높이, 위치를 구하는 함수가 있습니다.
그 외의 CSS 재정의하는 함수가 있습니다.
참고 - Jquery Api Document
| 함수 | 설명 |
|---|---|
| .addClass() | class속성에서 클래스를 추가합니다. |
| .hasClass() | class속성에서 클래스가 있는지 확인한다. |
| .removeClass() | class속성에서 클래스를 제거한다. |
| .toggleClass() | class속성에서 클래스가 있으면 추가, 없으면 제거한다. |
| .height() | 요소의 높이를 구하거나 설정합니다. |
| .width() | 요소의 폭을 구하거나 설정합니다. |
| .innerHeight() | 요소의 padding 포함 높이 값을 구하거나 설정합니다. |
| .innerWidth() | 요소의 padding 포함 폭 값을 구하거나 설정합니다. |
| .outerHeight() | 요소의 padding, border 포함 높이 값을 구하거나 설정합니다. |
| .outerWidth() | 요소의 padding border 포함 폭 값을 구하거나 설정합니다. |
| .offset() | 요소의 절대 좌푯값을 구하거나 설정합니다. |
| .position() | 부모 요소의 기준으로 좌푯값을 구하거나 설정합니다. |
| .scrollLeft() | 가로 스크롤의 위치 값을 구하거나 설정합니다. |
| .scrollTop() | 세로 스크롤의 위치 값을 구하거나 설정합니다. |
| .css() | 요소의 스타일 속성값을 구하거나 설정합니다. |
| jQuery.cssHooks | 요소 스타일의 재정의를 설정한다. |
| jQuery.cssNumber | 단위없이 사용할 수 있는 모든 CSS 속성을 포함하는 객체입니다. |
위 함수를 확인하면 Class 관련 함수는 이전 포스트에서 한 Attribute 함수 포스트에서 공부한 부분이니 생략을 하겠습니다.
링크 - [Jquery] Attributes 관련 함수
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<div id="cssExam" style="max-width:300px;max-height:150px;overflow:scroll;border:1px solid #000;">
<div id="cssExam2" style="width:500px;height:500px;margin-left:10px">
<button onclick="outputExam()" style="color:#000!important">높이 폭 구하기</button><br />
<button onclick="resetExam()" style="color:#000!important">cssHooksTest</button><br />
<span id="output"></script><br />
</div>
</div>
<script>
//높이 폭 구하기 버튼 누르면 발생
function outputExam(){
//width 예제
output = "width:"+$("div#cssExam2").width();
//height 예제
output += ",height:"+$("div#cssExam2").height();
//position - top 예제
output += "<br />position:top-"+$("div#cssExam2").position().top;
//position - left 예제
output += ",left-"+$("div#cssExam2").position().left;
//offset - top 예제
output += "<br />offset:top-"+$("div#cssExam2").offset().top;
//offset - left 예제
output += ",left-"+$("div#cssExam2").offset().left;
$("span#output").html(output);
}
//cssHooks예제
function resetExam(){
$("div#cssExam2").css("reset","blue");
}
//스크롤 이벤트
$("div#cssExam").scroll(function(eventData,handler){
output = "<br /><br /> ";
//scrollTop, scrollLeft에제
output += "scrollTop"+$("div#cssExam").scrollTop()+",scrollLeft"+$("div#cssExam").scrollLeft();
$("span#output").html(output);
});
var resetValue = true;
//cssHooks예제 - style이름이 reset style="reset:blue"(Jquery에서만 적용)
$.cssHooks.reset = {
get: function(elm, computed){
return resetValue;
},
set: function(elm, value){
if(resetValue){
resetValue=!resetValue;
//css 재정의
$(elm).css('color', "#FFF");
return $(elm).css('background-color', value);
}else{
resetValue=!resetValue;
//css 재정의
$(elm).css('color', "#000");
return $(elm).css('background-color', "#FFF");
}
}
};
outputExam();
</script>
</BODY>
</HTML>
위 예제를 살펴보면 마지막에 outputExam() 함수가 실행되기 때문에 구하기 버튼을 누른결과가 화면에 나옵니다. 그럼 먼저 테스트가 cssHooksTest 버튼을 누르면 색이 바뀌는 것을 확인할 수 있습니다.
CSS에는 reset이라는 스타일을 추가했는데 실제는 reset이라는 스타일은 없습니다. 밑에 cssHooks로 재정의를 해서 파라미터가 하나는 get을 두 개는 set을 호출합니다.
그리고 테스트는 왼쪽, 오른쪽 스크롤이 이동하면 현재 스크롤의 좌표가 나오는 scrollTop, scrollLeft의 결과가 화면에 나옵니다.
다시 구하기 버튼을 누르면 초기의 width, height, position, offset의 값이 나옵니다.
'Study > Javascript, Jquery, CSS' 카테고리의 다른 글
| [HTML] 메타 태그(SEO 최적화 포함) (0) | 2020.01.12 |
|---|---|
| [HTML] Html의 태그 구조 (1) | 2020.01.09 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events) (0) | 2016.03.30 |
| [Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment) (2) | 2016.03.29 |
| [Jquery] Attributes 관련 함수 (0) | 2016.03.27 |
| [Jquery] Selector (선택자) (0) | 2016.03.26 |
| [Jquery] Ajax(비동기 통신)와 Json (0) | 2015.07.05 |
| [Jquery] Jquery 기초 (0) | 2015.07.04 |