如何实现单击一个div让这个div的背景颜色从粉色切换成蓝色再次单击div切换回粉色？希望主要通过js来实现

就是通过单击来实现蓝色和粉色背景色来回切换
我的部分代码如下：

html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单击切换颜色</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .qiehuan {
            height: 5rem;
            width: 5rem;
            margin: 0 auto;
            margin-top: 10rem;
            text-align: center;
            line-height: 5rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="qiehuan">
        芜湖~
    </div>
</body>
</html>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

CSDN专家-天际的海浪 2022-01-29 21:33

关注

你题目的解答代码如下：

html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单击切换颜色</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
 
        .qiehuan {
            height: 5rem;
            width: 5rem;
            margin: 0 auto;
            margin-top: 10rem;
            text-align: center;
            line-height: 5rem;
            background-color: pink;  
        }
    </style>
</head>
<body>
    <div class="qiehuan">
        芜湖~
    </div>
<script type="text/javascript">
document.querySelector(".qiehuan").onclick = function () {
    if (this.style.backgroundColor!=="blue") {
        this.style.backgroundColor="blue";
    } else {
        this.style.backgroundColor="pink";
    }
}
</script>
</body>
</html>

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(2条)

报告相同问题？

关注问题

如何实现单击一个div让这个div的背景颜色从粉色切换成蓝色再次单击div切换回粉色？希望主要通过js来实现 css html javascript 有问必答
2022-01-29 21:17

回答 3 已采纳你题目的解答代码如下： html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="
如何在点击一个<div>时去执行一个javascript里的函数？ javascript
2018-05-18 10:43

回答 9 已采纳被action给干扰了
可编辑div 图片在谷歌浏览器里面如何能实现单击选中 javascript 有问必答
2022-03-06 13:30

回答 2 已采纳用range对象选中图片，示例如下 <div id="app"> <div contenteditable="true" style="border:solid 1px #
用ajax实现在单击事件下加载一个DIV层的脚本
2020-10-30 14:51

用ajax实现在单击事件下加载一个DIV层的脚本
在提交按钮上加载第二个DIV，单击第一个DIV，使第一个DIV在同一页面上可见 css php
2015-09-06 04:07

回答 1 已采纳 I would like to see your approach on that. However, it's pretty simple. Just don't treat the butto
如何在单击时将div的id传递给另一个php页面 html javascript php
2017-03-21 06:58

回答 1 已采纳 Not sure if this will suffice, but you could try this: <a href="<?php echo 'video_tut.php?v
单击另一个时更改div的style.display的函数 html javascript php
2017-11-04 18:39

回答 1 已采纳 You seem to have misspelt 'block'. SubDiv.style.display = 'blok'; document.getElementById(SubDivI
java单击切换div_jquery实现单击div切换背景，再次单击回到原来样式
2021-03-13 21:15

越昆的博客当我们再次单击第一个div时的样式：如果你需要的效果是这样的，那么请您继续往下面看，如果不是，您也可以看看实现方法。5.首先我们需要一个jQuery环境jquery-1.8.3.js，这个文件网上一搜一大堆，可以自行准备。将该...
单击提交按钮后，将第一个文本框的内容传到第二个文本框，代码运行错误？ html5 javascript
2020-04-09 22:58

回答 1 已采纳 ocument.getElementById("t2").value = MyContent 不是 InnerHTML
bootstrap模态框中div切换问题 bootstrap
2018-04-11 05:05

回答 3 已采纳之前那个问题贴了另外的代码给过你了啊，替换掉dvSteps容器中的直接div为你的内容就行了啊。。 ``` Bootstrap
如何在单击每个父div时从多个父div获取具有相同id的子div内容 html5 javascript jquery php
2014-04-25 09:25

回答 2 已采纳 Try this (see fiddle console) $(document).on('click','#display',function(){ $(this).find('.di
jquery实现单击div切换背景，再次单击回到原来样式
2018-11-06 15:13

穆雄雄的博客 3.当我们再次单击第一个div时的样式：如果你需要的效果是这样的，那么请您继续往下面看，如果不是，您也可以看看实现方法。 5.首先我们需要一个jQuery环境jquery-1.8.3.js，这个文件网上一搜一大堆，可以自行准备...
如何通过单击表格内的按钮来显示另一个表格？ html javascript mysql php
2016-01-05 02:55

回答 1 已采纳 You may want to use AJAX in order to achieve what you want. Reminder: mysql_* is already deprecat
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2020-10-23 14:26

主要介绍了jQuery实现单击弹出Div层窗口效果,具有可关闭可拖动的功能,涉及jQuery响应鼠标事件动态变换页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2020-12-11 09:18

本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法。分享给大家供大家参考。具体实现方法如下：代码如下:<html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> [removed]...
事件：利用addEventListener，实现单击来回切换div的背景颜色
2019-04-03 12:21

八荒我为王的博客 index.html 文件代码： <!DOCTYPE> <html> <head lang="zh-cn"> <title>DOM</title> <meta charset="utf-8"&...script type="text/javascript" src="myjs.js"></script...
没有解决我的问题, 去提问