[troubleshooting] JS 특정 링크 색 바꾸기(대증요법)

이 모든 삽질의 발단은 생활코딩의 야간/주간모드 토글이어따...

현상은 해결했지만 나는 아직도 그 원리를 모른다 ^^

지나가다 검색도 제대로 못 하는 이 중생이 딱해보이는 고수님이 계신다면 댓글 부탁드립니다 ^^

 

아직 모르는 것 : js 선택자로 '선택한 태그에 해당하는 모든 항목' 선택해 변경하기

                     "왜 document.querySelectorAll('a').style.color = 'white'라고 입력하면

                     모든(All) a태그 값이 white로 변하지 않고 최상위 1개만 변하는가????

                     만약 원래 그렇게 생겨먹은 거라면 vanilla에서 모두 선택해 변화시키는 가장 효율적인 방법은?"

 

생활코딩에서 댓글에 달린 답변 (22.01.18)

그리고 자바랑 CSS랑은 달라서, querySelectorAll('a') 로 선택을 하시면 안됩니다.
querySelectorAll('a')는 a태그가 달린 모든 걸 선택한다는게 아니고, 모든걸 배열로 가져온다는 뜻입니다.
배열은 나중에 나오겠지만,
쉽게말하면 querySelectorAll('a')[0] 이 첫번째 a태그, querySelectorAll('a')[1] 이 두번째 a태그... 이런식으로 지정이 되는거라, for문으로 처음부터 끝까지 돌면서 변경해줘야하는것 같아요.

 

---

문제 발생(22.01.04) : 기존 홈페이지에 night_day 토글을 추가할 경우 메뉴가 검은 색으로 보인다.

기존 stylesheet에서 'a' 컬러를 black으로 지정해 두었기 때문..

document.querySelectorAll('a').style.color = 'white'; 으로 변형을 시도해 보았으나 먹히지 않는다.

 

-> 문제 해결 (22.01.05) : 반복문 통해서 해결.

var alist = document.querySelectorAll('a') 이렇게 넣은 후

alist[ i ].styel.color = 'white'; 로 변경하니 됐음.

찾은 걸 통째로 바꾸는 건 안 되고, 하나씩 꺼내서 바꿔넣는 건 되나 봄.

---

22.01.05 오늘의 문제 -> 22.01.06 해결

nightDayHandler 이용해 글씨색을 바꾸면 기존에 '메뉴 상 현재 페이지'에 입힌 초록색이 씻겨나가는 게 싫어서,

글씨색 변경된 뒤에 다시 '현재 페이지 링크(=title 태스 안 텍스트)'를 찾아 초록색으로 바꿔주는 방법을 생각해 봤다.

구글링 하고 이리저리 시도해 본 결과로 나온 게 아래 코드인데, 그냥 작동을 안 한다 ㅎ

var Links = {
  setColor:function(color){
      $('a').css('color', color);
   },
  returnColor:function(){
    var alist = document.querySelectorAll('a');
    function getTitleText() {
      const element = document.querySelector('title');
    var i = 0;
    while(i < alist.length){
      if(alist[i].textContent === element){
         alist[i].style.color = 'green';
      }else{
      i = i + 1;
      }
     }
   }
  }
}

22.01.06 단순하게 생각하기로 했다.

비록 모든 페이지에 직접 가서 원하는 것을 지정해 주는, 바람직하지는 못한 코드일지라도 문제가 해결되면 된다^^

페이지마다 green으로 바꾸고 싶은 부분에 class=green을 지정해 줬다.

아무래도 나는 js 선택자로 '모든' 요소를 변경시키는 방법을 모르겠어서 그냥 jquery 배운 거 써먹어 버렸다.

이해는 나중에 차차 하게 되겠지!

---

22.01.06 문제 발생

Ajax로 list(메뉴)를 밖으로 뺀 건 좋은데,

각 페이지마다 해당하는 메뉴에 색을 집어넣는 건 어떻게 해야 되나!?

메뉴가 그냥 txt 파일로 있는데 이걸 html파일로 바꿔야 되나 싶기도 하고 그렇다.. 

 

22.04.24 지나가던 나 曰

그건 js로 동적 class를 지정해주면 된단다..