요소에 클래스 추가하는 함수(js function)

 

 

안녕하세요 무택입니다 :)

오늘 알아볼 기능은 html요소에 클래스 추가하는 함수를 만들어보려고 합니다. 오늘의 기능에서 포인트는 기능을 함수로 만들어서 반복 사용에 편하게 만드는 것입니다. 

 

오늘의 예제 코드

1.HTML/CSS

-

<style>
  .red{color: red;}
</style>
<p id=title>글자수가 5를 넘어가면 클래스 추가</p>
글자입력: <input class="txtInput" type="text" onkeyup="print()"><p id=setNum></p>

2.JS

-

let title = document.querySelector('#title');

//요소에 클래스 추가하는 함수
function addClass(el, className) {
  el.classList.add(className);
}
function removeClass(el, className) {
  el.classList.remove(className);
}

function print(){
  let prtLang = document.querySelector('.txtInput').value.length;
  if(prtLang > 5){
    addClass(title, "red");
  } else {
    removeClass(title, "red");
  }
}

 

 

See the Pen 요소에 클래스 추가하는 함수 by TytanLee (@TytanLee) on CodePen.

 

오늘의 메인 코드는 바로 이 함수입니다.

function addClass(el, className) {
  el.classList.add(className);
}

매개변수로 요소이름(el), 추가할 클래스(className)을 받는 addClass함수입니다.

 

물론 위 함수를 만들지 않고도 요소에 클래스를 추가할 방법은 있습니다.

그러면 위 예제코드가 이렇게 변경이 되겠죠?

let title = document.querySelector('#title');

function print(){
  let prtLang = document.querySelector('.txtInput').value.length;
  if(prtLang > 5){
    document.querySelector('#title').classList.add('red');
  } else { document.querySelector('#title').classList.remove('red');
  }
}

[ document.querySelector('#title').classList.add('red'); ] 이렇게 직접 요소를 선택해서 클래스를 추가하는 것인데 위 기능을 한 두번만 사용한다고 하면 이 코드(하드코딩)가 더 효율적이지만 이렇게 클래스를 추가하는 일이 많이 필요한 페이지라면 함수를 만들어서 사용하는게 더 효율적이라고 볼 수 있습니다.

 

마무리로 정리하자면

하나의 기능을 여러번 사용 > 함수 사용

하나의 기능을 한 번만 사용 > 하드코딩

이렇게 이해하면 좋을 것 같습니다.