When?

선택한 요소에 class명이 있는지 조건을 검사할 때 사용하는 메서드

How?

$( '#myCont' ).hasClass( 'view' )
$('.arcodion').hasClass('on')

Losic

1. 엘리먼트의 클래스명을 받아
2. 엘리먼트요소에 class명이 있는지 조건을 검사하는 함수

처음 작성한 .hasClass()

function hasClass(el,clName){
    el = document.querySelector(el);

    if(el.indexOf(clName) > -1){
        console.log('true')
    } else {
        console.log('false')
    }
}

내가 생각하는 위 코드의 문제점은 받아오는 el이 무엇이냐를 콘솔로 찍었어야 함 위 코드에서 el은 div임

1. 엘리먼트의 클래스명을 받아 Javascript

<script>
    function el(el){
        return document.querySelector(el).className;
    }
</script>

2. 엘리먼트요소에 class명이 있는지 조건을 검사하는 함수 Javascript

function hasClass(el,clName){
   if(el.indexOf(clName) > -1){
        console.log('true');
   } else {
           console.log('false');
   }

}

hasClass('.btn','on')

When?

선택한 요소에 class명을 추가하는 메서드로 class명을 추가함으로 컨트롤 할 때 사용 하는 메서드

How?

$( '.btn' ).addClass( 'on' );
$( '.menu' ).addClass( 'is-open' );

Losic

1. 엘리먼트요소를 받아
2. 엘리먼트요소에 class명 추가

처음 작성한 .addClass()

el = dovument.querySelector(el);
el.classList.add(clName)

내가 생각하는 위 코드의 문제점은? 일회성이라는 것, 글로벌이라는 것,

1. 엘리먼트요소를 받아 Javascript

<script>
function el(el){
    return document.querySelector(el)
}
el('.btn')
</script>

2. 엘리먼트요소에 class명 추가 Javascript

function addClass(el,clName){
    el = document.querySelector(el)
    el.classList.add(clName)
}

addClass('.btn','on')