Javascript在单击时切换动画

我是Javascript新手，正在尝试找出实现以下目标的最佳方法

我已设置此页面，包括HTML和CSS：

我需要做的是，当用户单击图像容器时，两个h2标记都需要在图像顶部的中间/中心设置动画，以便它在一行中读取Lorem Ipsum。我还需要将文本颜色改为白色而不是蓝色。当用户再次单击时，文本颜色将恢复为原来的蓝色，位置将恢复为最初的状态。所以我想我需要切换这个

然后，我需要找出一种方法，防止此代码在小于920px的视口中运行，因为布局不同。理想情况下，我希望用户在这些较小的屏幕设备上点击图像，文本将以动画形式在图像顶部的单独行中显示Lorem和Ipsum

我最初尝试添加一个“单击”eventListener，并运行一个if/else语句进行测试

imgContainer.addEventListener('click', function() {
  if(lorem.style.color === "blue") {
    lorem.style.color = '#ffffff';
  }
  else {
    lorem.style.color = 'blue';
  }
});

但我觉得有一种更简单的方法，不用重复我自己

请注意，我必须使用vanilla JS，而不是jQuery

我期待着你的解决方案

那么：

imgContainer.addEventListener('click', function() {
    lorem.style.marginLeft = "5%"
    lorem.style.marginTop = "5%"
    lorem.style.color = lorem.style.color ? 'white' : 'blue';
});

如果您不熟悉，最后一行中的

？

称为三元运算符。它有点像迷你if/else:

a？b:c

表示“如果a，则b，否则c”。

如何：

imgContainer.addEventListener('click', function() {
    lorem.style.marginLeft = "5%"
    lorem.style.marginTop = "5%"
    lorem.style.color = lorem.style.color ? 'white' : 'blue';
});

如果您不熟悉，最后一行中的

？

称为三元运算符。它有点像迷你if/else:

a？b:c

表示“如果a，则b，否则c”。

Q: “我还需要将文本颜色更改为白色而不是蓝色。当用户再次单击时，文本颜色将恢复为原来的蓝色，位置将恢复为最初的状态。”

A:

//将这个类添加到CSS中

.hdr-color-white{
  color: white;
}

//添加到当前事件处理程序

imgContainer.addEventListener('click', function() {
  lorem.classList.toggle("hdr-color-white");
  ipsum.classList.toggle("hdr-color-white");
});

问: “然后，我需要找出一种方法，防止此代码在低于920px的视口中运行，因为布局不同。理想情况下，我希望用户在这些较小的屏幕设备上点击图像，文本将动画化，以便在图像顶部的单独行中显示Lorem和Ipsum。”

A: 防止代码在小于920px的视口中运行

@media screen and (max-width: 920px) {
  hdr-color-white{
    /*empty*/
  }
}

还可以通过窗口对象的window.screen.width方法测试宽度

要重新定位Lorem和Ipsum文本，请使用CSS通过position、top、left和transform属性将它们浮动到所需位置。 查看此链接了解有关定位的更详细说明。

在所需位置时，可以使用 转换：translateX（值）//如果添加到类中，则可以进行切换 “我还需要将文本颜色更改为白色而不是蓝色。当用户再次单击时，文本颜色将恢复为原来的蓝色，位置将恢复为最初的状态。”

A:

//将这个类添加到CSS中

.hdr-color-white{
  color: white;
}

//添加到当前事件处理程序

imgContainer.addEventListener('click', function() {
  lorem.classList.toggle("hdr-color-white");
  ipsum.classList.toggle("hdr-color-white");
});

问: “然后，我需要找出一种方法，防止此代码在低于920px的视口中运行，因为布局不同。理想情况下，我希望用户在这些较小的屏幕设备上点击图像，文本将动画化，以便在图像顶部的单独行中显示Lorem和Ipsum。”

A: 防止代码在小于920px的视口中运行

@media screen and (max-width: 920px) {
  hdr-color-white{
    /*empty*/
  }
}

还可以通过窗口对象的window.screen.width方法测试宽度

要重新定位Lorem和Ipsum文本，请使用CSS通过position、top、left和transform属性将它们浮动到所需位置。 查看此链接了解有关定位的更详细说明。

在所需位置时，可以使用

---

转换：translateX（值）//如果添加到类中，可以进行切换

感谢您的回复，这确实会使蓝色文本在单击时变为白色。但是，它不允许在两种颜色之间切换。例如，在第二次单击后，颜色需要再次变为蓝色，并返回其原始位置。你知道我如何用一个拨号键把两个文本动画到中间吗？改变三进制来考虑当前的颜色：<代码> LoEM.Studio。白色“：“蓝色”感谢您的回复，这确实会使蓝色文本在单击时变为白色。但是，它不允许在两种颜色之间切换。例如，在第二次单击后，颜色需要再次变为蓝色，并返回其原始位置。你知道我如何用一个拨号键把两个文本动画到中间吗？改变三进制来考虑当前的颜色：<代码> LoEM.Studio。白色“：“蓝色”就个人而言，这感觉就像是我使用JS添加/删除一个类，并使用CSS处理该类的所有样式更改。@DBS谢谢，我也同意，只是在编写JS时遇到了困难，但我个人不知道在将浏览器扩展到以下时如何处理，这感觉就像我只是使用JS添加/删除一个类，并使用CSS处理该类的所有样式更改。@DBS谢谢，我同意，只是在努力编写JS，然后我不知道如何在将浏览器扩展到920以下时实现这一点。谢谢，我设法让它全部正常工作，并在此过程中学习了如何使用classList.toggle！我甚至不必写If/Else语句。谢谢，我成功地完成了这一切，并学会了如何在此过程中使用classList.toggle！我甚至不必写If/Else语句。