如何在 CSS 中使用 if 语句，或用 javascript 解决？答案

【问题标题】：How to use an if statement in CSS, or solve it with javascript?如何在 CSS 中使用 if 语句，或用 javascript 解决？
【发布时间】：2017-12-15 08:28:53
【问题描述】：

页面底部的演示

所以我有一个默认不透明度为 0 的 div，我们称之为#myDiv。

当用户将鼠标悬停在#myDiv 上时，不透明度变为 1。

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}

现在我在 div 中有一个 <hr/> 标签，默认为 width: 0;，例如：

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

用户将鼠标悬停在#myDiv 后，它将转换为具有 100% 的宽度，如下所示：

#myDiv:hover hr {
  width: 100%;
}

现在我在这个网站上还有一个脚本可以检查移动用户，因为这些不会触发悬停效果。所以它会检查 div 是否在屏幕上可见，并将不透明度设置为 1。

现在我希望能够在移动设备上触发<hr/> 效果，我认为也许可以在 css 中使用 if 语句，但我认为这是不可能的。我的想法是这样的：

if (#myDiv.opacity == 1) {
  hr {
    width: 100%;
  }
}

但这不能用 css 完成，这可以用 Javascript 实现吗？或者这里最好的解决方案是什么？

我对 JavaScript 没有太多经验。

要在桌面上查看演示，请参阅： Go to My Work and hover over project

如何在移动设备上实现这一点？

【问题讨论】：

用scss怎么样？
你会想看看媒体查询 (w3schools.com/css/css3_mediaqueries_ex.asp)
所以你有一个JS脚本来检查#myDiv是否是inview并改变不透明度，为什么这个脚本也不能触发动画？

标签： javascript html css

【解决方案1】：

不，您不能在纯 CSS 中使用 if 语句。您可以use a mediaquery进行基本检测：

@media screen and (max-width:767px){
  hr {
    width: 100%;
  }
}

767 像素比 iPad 少一个。您当然可以将其更改为您喜欢的设置。

或者，您可以通过 javascript 执行此操作。您必须寻找一个 sn-p 来检查您是否是移动用户，如果是 -> 将类 isMobile 添加到您 <body />。现在你可以这样做了：

.isMobile hr {
    width: 100%;
}

根据您添加的关于“仅在视图中”的评论，您可以使用 javascript 来检测元素是否在视图中（这必须使用 javascript 完成）。有很多 sn-ps 可以找到。您可以使用相同的技巧，并添加类似isInView 的类。

在这两种情况下，我都让 CSS 进行实际更改，JS 只是辅助。这是因为 CSS 做样式，而不是 JS。这样你就可以让 css 知道它必须做什么。

【讨论】：

但是只有当#myDiv在视图中时才需要添加宽度，那么如何实现呢？
扩展了我的答案，请参阅行上方的最后一段

【解决方案2】：

尝试使用媒体查询，您还可以删除不透明度的 js ;)

@media screen and (max-width:767px){
  #myDiv {
    opacity: 1;
  }
  #myDiv hr {
    width: 100%;
  }
}

编辑：考虑到您还需要检查是否在视图中，在您的 js 中，不要将 opacity 设置为 1，而是向 #myDiv 添加一个类并像这样更改 css：

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#myDiv {
  opacity: 0;
}

#myDiv:hover, #myDiv.mobile {
  opacity: 1;
}

#myDiv:hover hr, #myDiv.mobile hr {
  width: 100%;
}

通过这种方式，您将以与桌面相同的 css 方式处理更改，只需添加一个类；）

【讨论】：

js也是用来检测div是否真的在屏幕上可见的。如果您查看链接并检查元素，您可以看到不透明度仅在您滚动到它时发生变化。
我正在尝试添加类，如下：(isScrolledIntoView(tile1)) ? $(caption1).classList.add("project-mobile") 但是这会引发错误，“无法读取未定义的属性 'add'”，而在顶部我说： var caption1 = document.getElementById('caption1'),这也存在于我的 html
你在用jquery吗？在这种情况下，你只需要像 $('#caption1').addClass('project-mobile'); 那样做一些事情，如果你使用的是 vanilla js，你需要做一些像 caption1.className += ' project-mobile'; 这样的事情
附言。建议：如果您采用框架，请使用它，不要将香草和框架混在一起，这会使代码混乱......所以，例如，如果您使用 jquery，请不要执行document.querySelector('#blabla') 或document.getElementById('blabla') 简单调用$('#blabla') ;)
是的，我现在已经设法修复它。确实是jquery。我现在已经这样做了：(isScrolledIntoView(tile1)) ? $('#caption1').addClass("project-mobile") : $("#caption1").removeClass("project-mobile");，它终于可以工作了！感谢您的帮助！

【解决方案3】：

您可以使用 jQuery。如果这不起作用请发表评论，以便我可以为您提供帮助.. 我不在桌面 atm 后面

if ($('.test').css('opacity') === '1') {
    $("hr").css("width", "100%");
}

【讨论】：