querySelectorAll을 사용하여 여러 요소 스타일 업데이트

Question

사용자가 드롭 다운 선택자가있는 html 양식을 제출하여 페이지의 특정 CSS 속성, 특히 바닥 글 요소를 업데이트 할 수있게하려고합니다. 그러나, 내 jquery (나는 잘 모르겠다) 트릭을하고 있지 않습니다. 나는 그것이 querySelectorAll과 관련이 있다고 생각하지만 왜 그런지는 잘 모르겠습니다. 바닥 글 배경의 첫 번째 스타일은 양식 서브트에서 성공적으로 업데이트됩니다.

HTML 형태 :

<form id="styleform"> 
    <div>Background:</div> 
    <div> 
     <select id="footerbgd">     
      <option value="#404040">Dark Grey</option> 
      <option value="#7B7B7B">Mid Grey</option> 
      <option value="#C5C5C5">Light Grey</option> 
      <option value="#E5E5E5">Lighter Grey</option> 
      <option value="#F4F4F4">Lightest Grey</option> 
      <option value="#ffffff">White</option> 
     </select>   
    </div>  
    <div>Text Link:</div> 
    <div> 
     <select id="footertextlink">      
      <option value="#404040">Dark Grey</option> 
      <option value="#7B7B7B">Mid Grey</option> 
      <option value="#C5C5C5">Light Grey</option> 
      <option value="#E5E5E5">Lighter Grey</option> 
      <option value="#F4F4F4">Lightest Grey</option> 
      <option value="#ffffff">White</option> 
     </select>   
    </div> 
    <input type="submit" value="Change Colors"> 
</form> 
<footer> 
    <ul> 
     <li> 
      <a>text link 1</a> 
     </li> 
     <li> 
      <a>text link 2</a> 
     </li> 
    </ul> 
</footer> 

여기 내 JS : 당신이 그것을 통해 루프를 필요로하고 개별적으로 각 요소에 style.color를 호출 할 수 있도록

$("#styleform").on('submit',function(event) { 
     var Fbgd = document.getElementById("footerbgd").value; 
     var Ftextlink = document.getElementById("footertextlink").value; 
     document.querySelector("footer").style.background = Fbgd; 
     document.querySelectorAll("footer li a").style.color = Ftextlink; 
     event.preventDefault(); 
    }); 

Answer 1

querySelectorAll()이 컬렉션을 반환합니다. 이것은 당신이 forEach()을 사용할 수 있습니다 수행합니다

document.querySelectorAll("footer li a").forEach(function(el) { 
    el.style.color = Ftextlink; 
});