时间戳

首页 > 解决方案 > 创建一个按钮来改变不同元素的背景和文本颜色

javascript - 创建一个按钮来改变不同元素的背景和文本颜色

问题描述

我正在尝试创建一个按钮，单击该按钮时，会将页面元素更改为不同的颜色组合。

这个想法是在单击按钮时使颜色成对发生变化。例如，当正文为“红色”，主标题为“黄色”时，备用标题和边框线为“红色”（与正文颜色相同），备用背景为“黄色”（与正文颜色相同）主要标题）。

由于某种原因，我无法使其工作。颜色似乎是随机变化的，而不是有顺序的，而且我无法更改“边框底部”颜色。

// Main titles color change

var colors = ["yellow", "red", "blue"];
var colorIndex = 0;
  
function changeText() {
    var col = document.getElementsByClassName("textcolor");
    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }
for(var i = 0; i < col.length; i++){
    col[i].style.color = colors[colorIndex];
    }
    colorIndex++;
    }

// Body background color change
  
var colors = ["red", "blue", "yellow"];
var colorIndex = 0;

function changeBackground() {
	var col = document.getElementsByClassName("bodycolor");
	if (colorIndex >= colors.length) {
	  colorIndex = 0;
    }
for(var i = 0; i < col.length; i++){
    col[i].style.backgroundColor = colors[colorIndex];
    }
    colorIndex++;
    }

   
// Alternate titles and borders color change

var colors = ["red", "blue", "yellow"];
var colorIndex = 0;
  
function changeTextAlt() {
    var col = document.getElementsByClassName("alt-textcolor");
    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }
for(var i = 0; i < col.length; i++){
    col[i].style.color = colors[colorIndex];
    }
    colorIndex++;
    }

// Alternate background color change
  
var colors = ["yellow", "red", "blue"];
var colorIndex = 0;

function changeBackgroundAlt() {
    var col = document.getElementsByClassName("alt-backgroundcolor");
    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }
for(var i = 0; i < col.length; i++){
    col[i].style.backgroundColor = colors[colorIndex];
    }
    colorIndex++;
    }
body{
    font-size: 18px;
    line-height: 1.66667;
    font-family: 'Open Sans',Arial,sans-serif;
    box-sizing: border-box;
    width: 100%;
    min-height: 100%;
    background-color: #fff;
    }
 

.textcolor{
    color: #000;
}

.bodycolor{
    background-color: #fff;
}

.alt-textcolor{
    color: #fff;
    border-bottom: 1px solid #fff;
}

.alt-backgroundcolor{
    width: 100%;
    height: 200px;
    background-color: #000;
}
<body class='bodycolor'>

<button type="button" onclick="changeBackground();changeText();changeTextAlt();changeBackgroundAlt();">Click me</button>

<p class='textcolor'>This is a title</p>

<div class='alt-backgroundcolor'>

<p class='alt-textcolor'>This is an alternate title 1</p>
<p class='alt-textcolor'>This is an alternate title 2</p>
<p class='alt-textcolor'>This is an alternate title 3</p>
<p class='alt-textcolor'>This is an alternate title 4</p>
</div>

<div class='bodycolor'>

<p class='textcolor'>This is another title</p>

</div>

</body>

标签： javascripthtmlcssbuttononclick

解决方案

试试这个？ JSFiddle

const colors = ["yellow", "red", "blue"];
let colorIndex = 0;

function changeColor() {
    let col = document.getElementsByClassName("textcolor");
    let altCol = document.getElementsByClassName('alt-textcolor');

    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }

    for(let i = 0; i < col.length; i++){
    col[i].style.color = colors[colorIndex];
    col[i].style.color = colors[colorIndex+1];
    }
    colorIndex++;
    }

function changeAltColor() {
    let col = document.getElementById("bodycolor");
    let altCol = document.getElementById('alt-backgroundcolor');

    if (colorIndex >= colors.length) {
      colorIndex = 0;
    }

    col.style.backgroundColor = colors[colorIndex+1];
    altCol.style.backgroundColor = colors[colorIndex];
    colorIndex++;
    }

考虑到您一次只更改两种颜色（替代颜色和主颜色），因此不需要 4 个功能。

此外，如果您有诸如div具有单独用途的单个元素，id则为它们使用属性而不是class，编写代码会更容易。

推荐阅读