slice 메서드 :: 특정 클래스 스타일 변경 (JavaScript 코드 예제)

HTML

<ul id="tutorial">
    <li class="html">HTML</li>
    <li class="css">CSS</li>
    <li class="css3">CSS3</li>
    <li class="javascript">JavaScript</li>
    <li class="jquery">jQuery</li>
    <li class="blank"></li>
</ul>

 

Javascript

var li = document.querySelectorAll("#tutorial li");

for (var i = 0; i < li.length; i++) {
    var name = li[i].className;

    // 문자열 자르기
    // string.slice(start, end)
  
    if (name.slice(0, 3) == "css") {
        li[i].style.backgroundColor = "#666";
    }
}

 

 

JavaScript 코드 설명

1. querySelectorAll로 모든 <li> 요소 선택:
   • document.querySelectorAll("#tutorial li")는 #tutorial ID를 가진 <ul>의 모든 <li> 요소를 NodeList로 반환합니다.
2. for 루프로 각 <li> 요소 순회:
   • 루프를 사용해 각 <li> 요소의 클래스 이름(className)을 확인합니다.
3. slice 메서드로 문자열 자르기:
   • className.slice(0, 3)로 클래스 이름의 처음 3문자를 추출합니다.
   • 조건문 if (name.slice(0, 3) == "css")를 통해, 클래스 이름이 "css"로 시작하는지 확인합니다.
4. 조건 만족 시 스타일 변경:
   • 조건을 만족하는 <li>의 style.backgroundColor 속성을 통해 배경색을 변경합니다.

 

추가 팁

• startsWith 메서드 사용

: 최신 브라우저에서는 문자열이 특정 문자열로 시작하는지 확인할 때 startsWith 메서드를 사용할 수 있습니다:

if (name.startsWith("css")) {
    li[i].style.backgroundColor = "#666";
}