attr('class')
적용된 클래스 조회
addClass
클래스 추가
removeClass
클래스 삭제
toggleClass
클래스 추가/삭제 반복
hasClass
클래스 확인
<script>
$(function(){
console.log($('p').attr('class')); //size underline
});
</script>
<style>
.bold{
font-weight: bold;
}
.size{
font-size: 20px;
}
.underline{
text-decoration: underline;
}
</style>
<p class="size underline">내용</p>
class 3개를 지정해두고 p 태그에 size, underline 두가지 클래스를 적용하였다.
p태그가 가지고있는 class를 확인하기 위해 attr으로 class 속성을 지정한다.
현재 가지고 있는 size, underline 클래스가 확인된다.
$('p').addClass('bold');
$('p').addClass('bold');
console.log($('p').attr('class')); //size underline bold
addClass으로 p태그에 bold 클래스를 추가했다. 여러번 추가한다고 해서 중복 추가가 되지는 않는다.
$('p').removeClass('underline');
선택한 p 태그의 클래스 중에 underline을 삭제한다.
$('p').toggleClass('underline'); //추가
$('p').toggleClass('underline'); //제거
toggleClass는 실행할 때 마다 클래스가 없을 때는 추가하고, 있을 때는 제거하는 메서드이다.
console.log($('p').hasClass('bold')); //true
console.log($('p').hasClass('underline')); //false
hasClass로 해당 클래스가 존재하는지 확인한다. true / false 둘 중 하나가 리턴된다.
'WEB > jQuery' 카테고리의 다른 글
너비, 높이 - width, height / innerWidth, innerHeight / outerWidth, outerHeight (0) | 2022.06.20 |
---|---|
jQuery 좌표 : offset() , position() (0) | 2022.06.20 |
val() - attr('value') , html() - text() (0) | 2022.06.20 |
attr : 속성 값 가져오기, 속성 추가 / removeAttr : 속성 제거 (0) | 2022.06.20 |
jQuery : 제이쿼리 선언 (local, cdn) / 선택자 (0) | 2022.06.17 |