将 if/else 语句转换为三元运算符答案

【问题标题】：Turn if/else statement into ternary operator将 if/else 语句转换为三元运算符
【发布时间】：2021-07-09 01:48:47
【问题描述】：

如何将 if else 语句转换为三元运算符？我知道如果加上 if else 语句会更好读，我只是好奇

谢谢。

if (window.scrollY > 200) {
        header.style.padding= "5rem";
        header.style.boxShadow="0 0.4px 10px 1px #999";
    } else {
        header.style.padding= "1rem";
        header.style.boxShadow="none";
        })
    }

【问题讨论】：

标签： javascript if-statement conditional-operator

【解决方案1】：

这很简单……

header.style.padding = window.scrollY > 200
  ? "5rem"
  : "1rem";
header.style.boxShadow = window.scrollY > 200
  ? "0 0.4px 10px 1px #999"
  : 'none';

但不要使用 JavaScript 手动设置这些（使用条件运算符或其他任何东西），而是考虑切换 CSS 类，例如

.header {
  padding: 1rem;
  box-shadow: 'none';
}
.header.scrolled {
  padding: 5rem;
  box-shadow: 0 0.4px 10px 1px #999;
}

header.classList.toggle('scrolled', window.scrollY > 200);

【讨论】：

【解决方案2】：

if (window.scrollY > 200) {
    header.style.padding= "5rem";
    header.style.boxShadow="0 0.4px 10px 1px #999";
} else {
    header.style.padding= "1rem";
    header.style.boxShadow="none";

转三元

window.scrollY > 200 ?
  ( header.style.padding= "5rem",
    header.style.boxShadow="0 0.4px 10px 1px #999" )
:
  ( header.style.padding= "1rem",
    header.style.boxShadow="none" );

【讨论】：