.addClass()
페이지 정보
본문
요소에 class 속성을 추가한다.
실행 분류 | 형식 |
추가 | $("div").addClass("클래스명"); |
콜백 함수 | $("div").addClass(function(index, className){ <div>내용2</div> <div>내용3</div> |
[추가설명]
[CSS] display 속성 | 설명 |
inline | 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. |
block | 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. |
inline-block | 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능해집니다. |
ex)
<style>
* {
margin: 0;
padding: 0;
}
#m2 {
text-align: center;
}
.box {
border-bottom: 2px solid #ccc;
text-align: center;
padding: 20px;
}
.circle0,
.circle1,
.circle2 {
width: 100px;
height: 100px;
border-radius: 54px;
border: 4px solid #ff0000;
line-height: 100px;
display: inline-block;
}
</style>
<script>
$(document).ready(function(){
$("#m1 > div").addClass("box");
$("#m2 > div").addClass(function(index){
return "circle"+index;
});
});
</script>
<div id="m1">
<div>jQuery</div>
</div>
<div id="m2">
<div>html</div>
<div>css</div>
<div>javascript</div>
</div>
[실행결과]
- 이전글▼ jQuery 클래스 관련 메서드 ( 냉무 ) 21.07.19
- 다음글.removeClass() 21.07.19
댓글목록
등록된 댓글이 없습니다.