如何添加一个带有onclick事件的CSS类？

lmyy7pcs  于 2023-01-27  发布在  其他
关注(0)|答案(6)|浏览(174)

我正在尝试使用JavaScript添加一个带有onclick事件的CSS类。
这是我的html。

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="weekly.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
</head>
<body>
    <div class="sf_new_calendar_weekly_container">
        <div class="sf_day_card">
            <div class="sf_day_card_heading">
                    <h5>MON</h5>
                    <p>January 9</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">

                    </div>
                    <div class="sf_park_events_hours">

                    </div>
                    <div class="sf_park_events_hours">
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div class="sf_day_card">
            <div class="sf_day_card_heading">
                    <h5>TUE</h5>
                    <p>January 10</p>
            </div>
            <div class="events"><div class="sf_parks_hours">
                <div class="sf_general_hours">

                </div>
                <div class="sf_park_events_hours">

                </div>
                <div class="sf_park_events_hours"></div>
            </div></div>
            
        </div>
        <div class="sf_day_card">
            <div class="sf_day_card_heading">
                    <h5>WED</h5>
                    <p>January 11</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">

                    </div>
                    <div class="sf_park_events_hours">

                    </div>
                    <div class="sf_park_events_hours">
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div class="sf_day_card_open sf_day_card_open_yellow ">
            <div class="sf_day_card_heading bg_yellow">
                    <h5>THU</h5>
                    <p>January 12</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">
                        <i class="fa-regular fa-clock"></i>
                        <p>10AM - 6PM</p>
                    </div>
                    <div class="sf_park_events_hours">
                        <p class="event-title">Water Park</p>
                        <p class="event-hours">10AM - 6PM</p>
                    </div>
                    <div class="sf_park_events_hours">
                        <p class="event-title">Safari</p>
                        <p class="event-hours">10AM - 6PM</p>
                    </div>
                    <hr>
                </div>
                <div class="sf_events">
                    <div class="sf_park_event_heading">
                        <i class="fa-regular fa-flag"></i>
                        <p class="event_name">Pass Holder Appreciation Week</p>
                    </div>
                    <div class="sf_park_event_heading">
                        <i class="fa-regular fa-flag"></i>
                        <p class="event_name">Christmas in the Park</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="sf_day_card_open">
            <div class="sf_day_card_heading ">
                    <h5>FRI</h5>
                    <p>January 13</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">
                        <i class="fa-regular fa-clock"></i>
                        <p class="event-hours">10AM - 6PM</p>
                    </div>
                    <div class="sf_park_events_hours">

                    </div>
                    <div class="sf_park_events_hours">
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div class="sf_day_card_open">
            <div class="sf_day_card_heading">
                    <h5>SAT</h5>
                    <p>January 14</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">
                        <i class="fa-regular fa-clock"></i>
                        <p class="event-hours">10AM - 6PM</p>
                    </div>
                    <div class="sf_park_events_hours">
                    </div>
                    <div class="sf_park_events_hours">
                        
                    </div>
                </div>
            </div>
            
        </div>
        <div class="sf_day_card">
            <div class="sf_day_card_heading">
                    <h5>SUN</h5>
                    <p>January 15</p>
            </div>
            <div class="events">
                <div class="sf_parks_hours">
                    <div class="sf_general_hours">

                    </div>
                    <div class="sf_park_events_hours">

                    </div>
                    <div class="sf_park_events_hours">
                        
                    </div>
                </div>
            </div>
            </div>
        </div>

    </div>

    <script src="script.js"></script>
</body>
</html>

这是我的脚本，我用一个类来定位div。

let heading = document.querySelectorAll(".sf_day_card_heading");

我想添加一个CSS类，将我选择的div的背景颜色更改为黄色，但我不知道如何开始逻辑。
我知道我必须使用onclick事件执行函数并添加CSS类，但我不知道如何操作。

css

6条答案

按热度按时间
yrwegjxp

yrwegjxp1#

这可能有助于：首先，您需要向HTML div标记添加一个id：

<div id="dayCardHeading" class="sf_day_card_heading">

然后在javascript中添加事件监听器：

let heading = document.getElementById("dayCardHeading");
heading.addEventListener("click", modifyColor);

function modifyColor() {
document.getElementById("modifyColor").style.background = "#F7B538" ;
}

了解更多：Event Target addEventListener
如果有帮助，请标记。

赞(0）分享  回复(0）举报  2023-01-27
unhi4e5o

unhi4e5o2#

这会将类添加到您单击的元素中，并从其他元素（类似元素）中删除该类

let heading = document.querySelectorAll(".sf_day_card_heading");
heading.forEach((el) => {
  el.addEventListener('click', (event) => {
    heading.forEach((e) => e.classList.remove('your_class_name'));
    event.target.classList.add('your_class_name'));
  });
});

如果有帮助就告诉我。

赞(0）分享  回复(0）举报  2023-01-27
xmd2e60i

xmd2e60i3#

向document对象添加一个事件监听器，监听click事件。每当发生单击时，检查用户是否单击了.sf_day_card_heading div（或在其中）。根据结果添加类。

document.addEventListener('click', event => {
  const target = event.target.closest('.sf_day_card_heading');
  if (target !== null) {
    target.classList.add('bg_yellow');
  }
});
赞(0）分享  回复(0）举报  2023-01-27
wqnecbli

wqnecbli4#

试试这个：

let heading = document.querySelectorAll(".sf_day_card_heading");

 function activeDiv(e) {
        heading.forEach((item) => item.classList.remove('bg_yellow'))
        e.classList.add('bg_yellow')
    }
heading.forEach(item => item.addEventListener('click', (e)=>activeDiv(item)))

在第一行中，选择所有图元：

let heading = document.querySelectorAll(".sf_day_card_heading");

接下来，在activeDiv()中，从每个元素中删除每个bg_yellow类，并将类bg_yellow仅添加到一个元素中：

function activeDiv(e) {
        // removes the class from every element
        heading.forEach((item) => item.classList.remove('bg_yellow'))
        // adds the class        
        e.classList.add('bg_yellow')
    }

最后，将click事件附加到heading数组中的每个元素，该数组调用activeDiv()函数来添加一个类：

heading.forEach(item => item.addEventListener('click', (e)=>activeDiv(item)))
赞(0）分享  回复(0）举报  2023-01-27
gstyhher

gstyhher5#

一旦你在一个变量中有了特定的元素，你就可以用它来访问属性。2在你的例子中，你可以通过以下方式来使用CSS：

heading.style.border = "1px solid #000";
heading.style.backgroundColor: "#fff";
赞(0）分享  回复(0）举报  2023-01-27
xlpyo6sf

xlpyo6sf6#

使用document.querySelectorAll可以正确获取元素。为了侦听每个元素上的单击事件，可以添加循环并添加事件侦听器。
事件侦听器的工作原理与onclick等HTML属性类似，但通常被认为更可靠，原因有很多，包括一个元素可以有多个事件侦听器用于同一事件，而它只能有一个onclick属性。
要切换元素上的CSS类，可以使用element.classList.toggle(className)
在本例中，可以使用for...of loop循环遍历元素，并使用addEventListener为每个元素添加一个事件侦听器，然后在事件侦听器中切换黄色CSS类：

const headings = document.querySelectorAll(".sf_day_card_heading");
for (const heading of headings) {
  heading.addEventListener("click", (event) => {
    // This adds the class "background-yellow" to the element. 
    // You can select the `background-yellow` class in your CSS,
    // or you can use a different class name and modify it here.
    heading.classList.toggle("background-yellow")
  });
}

您可以在CSS中使用类似以下的代码：

.background-yellow {
  background-color: yellow;
}

希望这个有用。

赞(0）分享  回复(0）举报  2023-01-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com