자바스크립트: 클래스가 있는지 체크하기

워드프레스 정보를 제공하는 블로그 Avada 2021. 2. 5. 15:17 • 댓글:

자바스크립트(JavaScript)에서 특정 클래스가 있는 경우에 실행되도록 스크립트를 만들고 싶은 경우에 참고해보세요.

자바스크립트: 클래스가 있는지 체크하기

예를 들어, mobile 클래스가 존재하는 경우에 팝업을 표시하는 경우를 생각해볼 수 있습니다.

<div class="mobile">

 그러면 다음과 같은 스크립트를 사용할 수 있습니다.

var isMobileVersion = document.getElementsByClassName('mobile');
if (isMobileVersion.length > 0) {
    // elements with class "mobile" exist
}

getElementsByClassName는 배열과 유사한 개체(array-like object)인 NodeList를 반환한다고 합니다. 그 길이를 체크하여 정의된 클래스가 있는 요소(element)가 있는지 결정할 수 있습니다("If class exists, do something with Javascript" 참고). 

getElementsByClassName returns a NodeList which is an array-like object. You can check its length to determine if elements with defined class exist:

마치며

워드프레스의 일부 페이지에서 자바스크립트와 관련하여 "Uncaught TypeError: Cannot read property 'innerHTML' of undefined at (index):776..."과 비슷한 오류가 발생하여 문제의 원인을 찾다가 해당 스크립트가 실행되지만 스크립트에서 필요로 하는 클래스가 없는 페이지에서 이와 같은 오류가 발생하는 것을 발견했습니다. 그래서 해당 스크립트가 특정 클래스(class)가 있는 경우에만 실행되도록 하니 문제가 해결되었습니다.ㅎ

참고

avada.tistory.com/342

 

javascript로 텍스트 변경하기 (자체 정리용)

자바스크립트로 텍스트를 변경하는 방법 예시입니다. 목차 자바스크립트로 텍스트 변경하기 html 소스 Test - 1 Test - 2 Test - 3 "Test - 3"을 "Test - 5"로 변경 var string = document.getElementsByTagName("..

avada.tistory.com

avada.tistory.com/1784

 

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거

avada.tistory.com