使用querySelectorAll更新多个元素样式

时间:2017-01-26 14:44:30

标签: javascript jquery css

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

1 个答案:

答案 0 :(得分:2)

querySelectorAll()返回一个集合,因此您需要遍历它并分别在每个元素上调用style.color。为此,您可以使用forEach()

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