jQuery 공작소 : .hasClass()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
hasClass 메서드는 지정한 대상에 CSS 클래스가 적용되어 있는지 확인합니다.
지정한 클래스가 있으면 true 없다면 false 가 반환됩니다.
예제 1
보기
아래 사진에 적용된 클래스를 확인해 보세요. (버튼 클릭)
이 예제에 css3 는 없습니다.
이 예제에 css3 는 없습니다.
소스
<style type="text/css">
.css_test {
margin-top : 20px;
}
.css_test img {
width : 60%;
}
.css_test .css1 {
box-shadow : 0 0 10px black;
}
.css_test .css2 {
border-radius : 20px;
}
</style>
아래 사진에 적용된 클래스를 확인해 보세요. (버튼 클릭)<br>
<button type="button" onclick="j_test('css1')">css1 있나요?</button>
<button type="button" onclick="j_test('css2')">css2 있나요?</button>
<button type="button" onclick="j_test('css3')">css3 있나요?</button><br>
이 예제에 css3 는 없습니다.
<div class="css_test">
<img class="css1 css2" src="https://t1.daumcdn.net/cfile/tistory/27239438550B92392A" />
</div>
<script type="text/javascript">
function j_test(str){
if($( '.css_test img' ).hasClass(str)) alert('예');
else alert('아니요');
}
</script>
.css_test {
margin-top : 20px;
}
.css_test img {
width : 60%;
}
.css_test .css1 {
box-shadow : 0 0 10px black;
}
.css_test .css2 {
border-radius : 20px;
}
</style>
아래 사진에 적용된 클래스를 확인해 보세요. (버튼 클릭)<br>
<button type="button" onclick="j_test('css1')">css1 있나요?</button>
<button type="button" onclick="j_test('css2')">css2 있나요?</button>
<button type="button" onclick="j_test('css3')">css3 있나요?</button><br>
이 예제에 css3 는 없습니다.
<div class="css_test">
<img class="css1 css2" src="https://t1.daumcdn.net/cfile/tistory/27239438550B92392A" />
</div>
<script type="text/javascript">
function j_test(str){
if($( '.css_test img' ).hasClass(str)) alert('예');
else alert('아니요');
}
</script>
관련 CSS
jQuery
- 이 예제는 아래 이미지 태그를 대상으로 합니다.
<img class="css1 css2" src="이미지 경로" />
$( 'img' ).hasClass( '클래스명' )
hasClass( 'css1' ) - true
hasClass( 'css3' ) - false
- 클래스가 있다면 true 없다면 false 가 반환됩니다.
+ 관련 jQuery +
jQuery 홈페이지 .hasClass() API 문서 : https://api.jquery.com/hasclass/