每次单击时更改元素的颜色（反之亦然）

空的

嘿，我正在尝试将元素背景颜色更改为米色时为红色，红色时为米色。我试过使用正确的 if 语句，但我似乎无法找到解决方案。如果有人帮助我，我会非常高兴！谢谢。

HTML

<div id="first" class="firstdiv">
    <h2>DenemeTahtası</h2>
    <div>
        <section id="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
            quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
            eligendi?
        </section>
    </div>
</div>

CSS

.firstdiv{
background-color: antiquewhite;
height: 50vh;

h2{
   
    margin-left: 40%;
    padding-top: 20px;

}

#lorem{
    margin: 0 auto;
    width: 65%;
    margin-top: 25px;
    text-align: center;
}

}

    let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)

function colorChange() {

    if (exp.style.backgroundColor = "beige") {
        exp.style.backgroundColor = "red"
    }
    else if (exp.style.backgroundColor = "red") {
        exp.style.backgroundColor == "beige"

    }

}

罗布森

这非常接近正确。需要注意的是等号的数量。

在进行比较时，您应该使用==. 您也可以使用===which 相同，但变量类型也必须匹配。
做作业时你应该使用=.

这意味着这段代码：

if (exp.style.backgroundColor = "beige") {
    exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor = "red") {
    exp.style.backgroundColor == "beige"
}

需要是：

if (exp.style.backgroundColor == "beige") {
    exp.style.backgroundColor = "red"
} else if (exp.style.backgroundColor == "red") {
    exp.style.backgroundColor = "beige"
}

最终的结果将是：

let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)

function colorChange() {
    if (exp.style.backgroundColor == "beige") {
        exp.style.backgroundColor = "red"
    } else if (exp.style.backgroundColor == "red") {
        exp.style.backgroundColor = "beige"
    }
}

.firstdiv {
  background-color: antiquewhite;
  height: 50vh;
}

h2 {
    margin-left: 40%;
    padding-top: 20px;
}

#lorem {
    margin: 0 auto;
    width: 65%;
    margin-top: 25px;
    text-align: center;
}

<div id="first" class="firstdiv">
    <h2>DenemeTahtası</h2>
    <div>
        <section id="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
            quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
            eligendi?
        </section>
    </div>
</div>

米色/红色矩形本质上是一个可点击的按钮，因此您可能需要添加几个 CSS 属性以使用户更直观。具体来说：

cursor: pointer; /* turn the mouse cursor into a hand */
user-select: none; /* disable selecting of text */

这样做的结果是：

let exp = document.querySelector("#lorem")
exp.style.backgroundColor = "beige"
exp.addEventListener("click", colorChange)

function colorChange() {
    if (exp.style.backgroundColor == "beige") {
        exp.style.backgroundColor = "red"
    } else if (exp.style.backgroundColor == "red") {
        exp.style.backgroundColor = "beige"
    }
}

.firstdiv {
  background-color: antiquewhite;
  height: 50vh;
}

h2 {
    margin-left: 40%;
    padding-top: 20px;
}

#lorem {
    margin: 0 auto;
    width: 65%;
    margin-top: 25px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

<div id="first" class="firstdiv">
    <h2>DenemeTahtası</h2>
    <div>
        <section id="lorem">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sit dolor, soluta ab illum aperiam
            quam! Eum, delectus aliquam ipsa perspiciatis modi perferendis laudantium aut vel, ut veniam quae
            eligendi?
        </section>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。