Question

我正在尝试为背景和字体颜色制作换色器。它大部分都在工作，但我无法弄清楚如何使链接和h2 / h3标签与其余文本一起更改。

＆＃13;

var div = document.getElementById('ColorChanger');
var allColors = [];
var currentColor = 0;

allColors.push({bg:"black",front:"#5DBF1B"});
allColors.push({bg:"#89a7e2",front:"black"});
allColors.push({bg:"black",front:"white"});
allColors.push({bg:"white",front:"black"});

div.addEventListener('click', function(e){
    var self = this,
        old_bg = this.style.background;

    document.body.style.background = allColors[currentColor].bg;
    document.body.style.color = allColors[currentColor].front;

   currentColor++;
if(currentColor == allColors.length) currentColor = 0;

})

＆＃13;

<div id="ColorChanger"><img alt="Click to change color" class="ignore_menu_hide" src="/App_Themes/Site/assets/images/theme_icon.png" /></div>




							    <h2>Follow Us</h2>
<ul class="social_media"><li><a href="#" alt="Facebook Link">

Facebook</a></li>
<li><a href="#" alt="Twitter Link">

Twitter</a></li>
<li><a href="#" alt="">
RSS Feeds</a></li>
<li><a href="#">
YouTube</a></li>
<li><a href="#" alt="Linked In Link">
LinkedIn</a></li>
<li><a href="#" alt="Pinterest Link">
Pinterest</a></li>
<li><a href="#" alt="">

Instagram</a></li>
 </ul>


<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

＆＃13;

Answer 1

基本上，您需要使用document.getElementsByTagName("p") / document.getElementsByTagName("h1") / document.getElementsByTagName("a")抓取这些元素并迭代它们并应用样式。

var div = document.getElementById('ColorChanger');
var allColors = [];
var currentColor = 0;

allColors.push({
    bg: "black",
    front: "#5DBF1B"
});
allColors.push({
    bg: "#89a7e2",
    front: "black"
});
allColors.push({
    bg: "black",
    front: "white"
});
allColors.push({
    bg: "white",
    front: "black"
});

div.addEventListener('click', function(e) {
    var self = this,
        old_bg = this.style.background;

    document.body.style.background = allColors[currentColor].bg;
    document.body.style.color = allColors[currentColor].front;

    var pElements = document.getElementsByTagName("p");
    var h2Elements = document.getElementsByTagName("h2");
    var aElements = document.getElementsByTagName("a");

    for (var i = 0; i < pElements.length; i++) {
        pElements[i].style.color = allColors[currentColor].front;
    }

    for (var i = 0; i < h2Elements.length; i++) {
        h2Elements[i].style.color = allColors[currentColor].front;
    }

    for (var i = 0; i < aElements.length; i++) {
        aElements[i].style.color = allColors[currentColor].front;
    }

    currentColor++;
    if (currentColor == allColors.length) currentColor = 0;

})

单击颜色转换器

1 个答案: