Question

我是Javascript的新手并试图找出实现以下目标的最佳方式。

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

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

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

我最初尝试添加＆＃34; 点击＆＃34; eventListener，并运行 if / else 语句进行测试。

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

但我觉得有一种更轻松的方法来解决这个问题而不重复自己。

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

我期待您的解决方案！

Answer 1

怎么样：

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表示＆＃34; b如果是，否则c＆＃34;。

Answer 2

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

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＆amp; Ipsum显示在图像顶部各自独立的行中。“

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

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

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

要重新定位Lorem和Ipsum文本，请使用CSS通过position，top，left和transform属性将它们浮动到所需位置。有关定位的详细说明，请查看此链接。 https://css-tricks.com/absolute-positioning-inside-relative-positioning/

在所需位置，您可以使用幻灯片生效 transform：translateX（value）; //如果添加到类

，则可以切换

点击

2 个答案: