JavaScript：触发多个事件？

Question

我想完成这个我在情人节那天为我妈妈做的项目。

我希望能够点击一个h2并让它触发多个事件，例如将背景颜色设为绿色，将h2的字体大小更改为 50px 之类的更大的大小，并将h1的字体大小更改为 50px

我从来没有从一个 onclick 事件同时触发多个事件。 我很乐意帮助让妈妈开心。

 body { background-color: lightblue; }

 <html> <body> <h1 style="color:purple; text-align:center;" onclick="this.style.color='yellow'; this.style.fontSize='40px'; document.body.style.backgroundColor='green';"> Happy Valentines Day Mom! </h1> <img src="Source/me.jpg" alt="This is Me" width="300" height="300" align="middle"> <p align="center" style="color:white;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='';"> Lots of love and wishes on this day. It is not possible to repay the love that you have given to me. I just can love you, dear mom. Take my lots of love on this Happy Valentine's Day. </p> <img src="source/mom.jpg" alt="Mom" width="200" height="200" align="middle"> <h1 style="color:blue; text-align:center;" onclick="this.innerHTML='Best Mother Ever!';"> I love you so much! - J </h1> <br> <h2 id="joke" align="center" style="color:white;" onmouseover="this.style.textDecoration='line-through';" onmouseout="this.style.textDecoration='';">PS I love you more!</h2> <button type="button" onclick='document.getElementById("joke").innerHTML = "PSS you are the best!"'>Click Me!</button> </body> </html>

Answer 1

我认为最好使用 CSS 文件处理样式。

创建一个 CSS 文件并设置一些类，例如：

h2.valentines {
    background-color: green;
    font-size: 50px;
    color: white;
}

然后在onclick事件上，您可以传递一个函数将类添加到您想要的元素，就像这样：

function addValentineClass() {
    const element = document.getElementById('joke');
    element.className = "valentines";
}

JavaScript：触发多个事件？

问题描述

1 个解决方案

解决方案1
1 2020-03-11 18:09:35

JavaScript：触发多个事件？

问题描述

1 个解决方案

解决方案1 1 2020-03-11 18:09:35

解决方案1
1 2020-03-11 18:09:35