자바스크립트 색상 찾아 변경하기

김덕근·2023년 6월 18일
0

JAVASCRIPT

목록 보기
17/18

같은 이름의 클래스로 되어있을때 클릭한 이벤트만 찾아 적용하기 위해서
Jquary를 사용하면 편하다

// 색상 추출
$(".BgColor").click(function() {
  BgColor = $(this).attr("value");
  $(this).siblings().css("border", "2px solid #939597");
  $(this).css("border", "2px solid red");
});

내가 선택한 이벤트가 외부 라이브러리를 통해 값을 가져와 변수 BgColor에 담을 경우 내가 선택한 색상이 BgColor와 일치하면 형제들의 색상을 하나로 통일해주고 선택한 색상을 강조하기 위한 코드이다.

        const selectColor = document.getElementsByClassName("BgColor");
        for(let i = 0; i < selectColor.length; i++) {
          if(BgColor == selectColor[i].getAttribute("value")) {
            const siblings = Array.from(selectColor[i].parentNode.children);
            siblings.forEach((sibling) => {
              sibling.style.border = "2px solid #939597";
            });
            selectColor[i].style.border = "2px solid red";
          }
        }
profile
안녕하세요!

0개의 댓글