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：

$( "#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()返回一个集合，因此您需要遍历它并分别在每个元素上调用style.color。为此，您可以使用forEach()：

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

使用querySelectorAll更新多个元素样式

1 个答案: