如何使用JavaScript在点击按钮时更改背景颜色和文本颜色？

Question

我试图将三个不同的段落变成颜色相同但不同的主题（在示例中并不明显，这只是一个测试）。但是我无法让它们改变。:( 我也愿意使用 JQuery 的方式来实现。

HTML

<button onclick="white()">
        <p>White</p>
    </button>

    <button onclick="red()">
        <p>Red</p>
    </button>

    <button onclick="yellow()">
        <p>Yellow</p>
    </button>

    <button onclick="blue()">
        <p>Blue</p>
    </button>

    <h1>Hey There</h1>
    <ul class="list-unstyled">
        <li>Colors are cool</li>
        <li>Join the Rebellion!!!</li>
    </ul>


    <div class="colorbox" id="colorbox1">
        <h1>Div one</h1>
        <p>I'm 1</p>
    </div>

    <div class="colorbox" id="colorbox2">
        <h1>Div two</h1>
        <p>I'm 2</p>
    </div>

    <div class="colorbox" id="colorbox3">
        <h1>Div three</h1>
        <p>I'm 3</p>
    </div>

JAVASCRIPT

var colorbox1 = document.getElementsById('colorbox1');
var colorbox2 = document.getElementsById('colorbox2');
var colorbox3 = document.getElementsById('colorbox3');

function white() {
    colorbox1.style.backgroundColor = "white";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "white";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "white";
    colorbox3.style.color = "black";
}

function red() {
    colorbox1.style.backgroundColor = "red";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "red";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "red";
    colorbox3.style.color = "black";
}

function yellow() {
    colorbox1.style.backgroundColor = "yellow";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "yellow";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "yellow";
    colorbox3.style.color = "black";
}

function blue() {
    colorbox1.style.backgroundColor = "white";
    colorbox1.style.color = "black";

    colorbox2.style.backgroundColor = "white";
    colorbox2.style.color = "black";

    colorbox3.style.backgroundColor = "white";
    colorbox3.style.color = "black";
}

- cosmichero2025

Answer 1

没有 getElementsById() 方法，只有不带 s 的 getElementById()

var colorbox1 = document.getElementById('colorbox1');
var colorbox2 = document.getElementById('colorbox2');
var colorbox3 = document.getElementById('colorbox3');

- The Process

Answer 2

JQUERY处理方式： 首先，我只会有一个函数。只需将颜色作为参数传递给它即可。

onclick="changeColor('#3E6AA9')" //for blue

这是完整的代码（没有处理背景）。

<button onclick="changeColor('#fff')">
        <p>White</p>
    </button>

    <button onclick="changeColor('#D80000')">
        <p>Red</p>
    </button>

    <button onclick="changeColor('#FBD505')">
        <p>Yellow</p>
    </button>

    <button onclick="changeColor('#0086BE')">
        <p>Blue</p>
    </button>

    <h1>Hey There</h1>
    <ul class="list-unstyled">
        <li>Colors are cool</li>
        <li>Join the Rebellion!!!</li>
    </ul>


    <div class="colorbox" id="colorbox1">
        <h1>Div one</h1>
        <p>I'm 1</p>
    </div>

    <div class="colorbox" id="colorbox2">
        <h1>Div two</h1>
        <p>I'm 2</p>
    </div>

    <div class="colorbox" id="colorbox3">
        <h1>Div three</h1>
        <p>I'm 3</p>
    </div>
    <script>
    function changeColor(color){
console.log(color);
$('.colorbox').css({'color': color});
}
    </script>

请检查这个工作中的FIDDLE。

- IsraGab

---

@cosmichero 2025，如果您需要这段代码的解释，请告诉我，我会进行编辑。 - IsraGab

我理解这段代码，但是针对我的特定需求，我只需要更改 div 的内容。我放置的代码只是一个我正在开发的大型项目的测试。我只是在 getElementById 中多了一个 s，但我喜欢你的答案 :D - cosmichero2025

现在我已经让它工作了，接下来得处理颜色缓慢动画的问题。 - cosmichero2025