Javascript 使用querySelectorAll更新多个图元样式

我试图允许用户通过提交带有下拉选择器的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>

querySelectorAll（）

返回一个集合，因此需要循环遍历它，并分别对每个元素调用

style.color

。为此，您可以使用

forEach（）

：

querySelectorAll（）

返回一个集合，因此需要循环遍历它，并分别对每个元素调用

style.color

。为此，您可以使用

forEach（）

：

---

event.preventDefault（）

不应该在顶部吗？@Crowes的一般做法是把它放在顶部，但它对逻辑流程没有影响。preventDefault（）不应该在顶部吗？@Crowes的一般做法是把它放在顶部，但是，感谢您的解释，它对逻辑流没有任何影响。尝试使用强制转换值为HTMLElement

document.queryselectoral（“footer li a”）.forEach（函数（el）{（值为HTMLElement.el.style.color=Ftextlink；}）感谢您的解释。尝试使用强制转换值为HtmleElement
document.querySelectorAll（“footer li a”）.forEach（函数（el）{（值为HtmleElement.el.style.color=Ftextlink；}）
$( "#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();
    }); 

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