Question

你如何将这个 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";
        })
    }

Answer 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);

Answer 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" );

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

2 个答案: