일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 1일 1패턴
- 1일 1영어회화
- 예비맘
- 초코맘
- css
- 설날
- effect
- 스타일 가이드
- 업무
- 신혼
- 영어회화
- event
- 영어 회화
- 재택근무
- 1일 1단어
- animation
- 달리기
- 결혼준비
- 산책
- 결혼
- 출산휴가
- 신혼생활
- 청첩장
- 가을
- 자바스크립트 스타일 가이드
- 영어공부
- HTML
- 용산아이파크몰
- 1일 1독서
- javascript
- Today
- Total
코딩물고기
[J] JavaScript & jQuery 공부하기 #27 본문
경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다.
32. 스타일 조작
* css() 메소드
- 선택된 요소의 스타일을 조작한다
기본 상태 : < p>hello world!< /p>
메소드 사용 : $("p").css("color","blue");
결과 : < p style="color:blue">Hello world!< /p>
* addClass()와 removeClass() 메소드
- 선택자에 의해 선택된 요소에 클래스 스타일을 추가하거나
제거할 수 있다
기본상태 : < p>hello world!< /p>
스타일지정 : .red{color : red}
메소드사용 : $("p").addClass("red");
결과 : < p class="red">hello world!< /p>
* css() 메소드 이용 스타일 조작
- css()를 적용할 요소들과 이벤트를 발생시킬 버튼을 생성함
< body>
< p style = "background-color:red">빨간색 배경요소</ p>
< p style = "background-color:orange">주황색 배경요소</ p>
< p style = "background-color:yellow">노란색 배경요소</ p>
< p>배경요소 없음</ p>
< button>배경색 변경</ button>
</ body>
- 버튼 클릭 이벤트가 발생하면 css() 메소드를 이용해 p 태그 영역의 배경을
보라색으로 변경하는 스크립트 생성
< script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","purple");
});
});
</ script>
* addClass()와 removeClass()이용 스타일 조작
- 메소드를 적용할 요소들과 이벤트 처리할 버튼들을 생성
< body>
< div id="div1">스타일을 적용할 텍스트</ div>
< div id="div2">스타일을 비교할 텍스트</ div>
< br>
< button id="btn1">스타일 적용하기</ button>
< button id="btn2">스타일 제거하기</ button>
</ body>
- 적용할 스타일을 클래스 연산자를 이용하여 정의함
< style type="text/css">
.important {font-weight:bold; font-size:20px;}
.blue {color:blue;}
</ style>
- 버튼을 클릭하면 addClass()와 removeClass() 메소드를 정의해
important와 blue로 정의된 스타일을 적용함
< script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").addClass("important blue");
});
$("#btn2").click(function(){
$("#div1").removeClass("important blue");
});
});
</ script>
* 예제
< script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
$("div").toggleClass("large bg_yellow blue");
});
});
</ script>
< style type="text/css">
.large {font-size:20px}
.bg_yellow {background-color:yellow;}
.blue {color:blue}
</ style>
< body>
< h1>1</ h1>
< h2>2</ h2>
< p>33</ p>
< div>This is some important text!</ div>
< button>Set styles</ button>
</ body>
'코딩물고기의 IT월드' 카테고리의 다른 글
[J] JavaScript & jQuery 공부하기 #29 (0) | 2019.04.09 |
---|---|
[J] JavaScript & jQuery 공부하기 #28 (0) | 2019.04.09 |
[J] JavaScript & jQuery 공부하기 #26 (0) | 2019.04.08 |
[J] JavaScript & jQuery 공부하기 #25 (0) | 2019.04.08 |
[J] JavaScript & jQuery 공부하기 #24 (0) | 2019.04.08 |