这是我参与「第四届青训营」笔记创作活动的的第6天

一、本堂课的重要内容

HTML/CSS/JS 各司其责
应当避免不必要的由 JS 直接操作样式
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案

二、详细知识点介绍

1、html,css,javascript各司其职 2、怎么避免JS直接操作样式

三、实践练习例子

1、深色浅色浏览模式切换

（1）版本一

获取按钮，通过addEventListener监听事件。点击按钮，通过css修改body.style.backgroundColor

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(e.target.innerHTML === '🌞') {
      body.style.backgroundColor = 'black';
      body.style.color = 'white';
      e.target.innerHTML = '🌜';
    } else {
      body.style.backgroundColor = 'white';
      body.style.color = 'black';
      e.target.innerHTML = '🌞';
    }
  });

相对来说比较简单易懂，但是局限性比较大，如果页面有其他特殊的样式颜色，需要添加修改。

（2）版本二

获取按钮，修改body的className，跟上一版比，没有直接修改body的backgroundColor,而是通过修改类名，相较版本一，不需要直接在函数中修改样式，减少代码直接的依赖。

const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
      body.className = 'night';
    } else {
      body.className = '';
    }
  });

（3）版本三

通过绑定input来修改样式，避免js直接操作，从而实现html/css/js各司其职。通过label绑定id为modeCheckBox的input。
:checked改变id为modeCheckBox的状态，点击label改变input的状态，从而使input样式改变。

<input id="modeCheckBox" type="checkbox">
  <div class="content">
    <header>
      <label id="modeBtn" for="modeCheckBox"></label>
      <h1>深夜食堂</h1>
    </header>
    <main>
      <div class="pic">
        <img src="https://p2.ssl.qhimg.com/t0120cc20854dc91c1e.jpg">
      </div>
      <div class="description">
        <p>
            这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈
            眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返 [6]  。
        </p>
      </div>
    </main>
  </div>

css

#modeCheckBox {
    display: none;
  }#

  #modeCheckBox:checked + .content {
    background-color: black;
    color: white;
    transition: all 1s;
  }

课后个人总结

1、版本三的方法不容易掌握，对:checked不太了解，经过课后查找资料之后逐渐明朗，平时在写js的时候没有注意到html/css/js各司其职，一般常用的是版本二，需要多练习。

引用参考

developer.mozilla.org/zh-CN/docs/…

html/css/js各司其职|青训营笔记1