html,css,Javascript各司其职｜ 青训营笔记

stu2024
123 阅读3分钟

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

深入理解html,css,Javascript

  1. HTML 定义了网页的内容
  2. CSS 描述了网页的布局
  3. JavaScript 控制了网页的行为
image.png

需要改变网页样式时，只使用html，css，因为这本是html，css应该负责的，而不要使用Javascript实现

例子： 深夜食堂

版本一 HTML+CSS+JavaScript

        // 获取🌞/🌜按钮
        const btn = document.getElementById("modeBtn");
        // 给🌞/🌜按钮添加点击监听
        btn.addEventListener("click", (e)=>{
            // 获取body元素
            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 = '🌞';
            }
        });

这里我们使用了JavaScript去修改了页面的样式及表现，也就是说JavaScript做了CSS该做的事，这样就违背了各司其职的原则。如果非要这样做会带来什么效果呢？当其他人来扩充需求的时候，比如再增加一个白底蓝字的模式，当代码很多的时候就一时无法重新上手。

版本二

        // 获取🌞/🌜按钮
        const btn = document.getElementById("modeBtn");
        // 给🌞/🌜按钮添加点击监听
        btn.addEventListener("click", (e)=>{
            // 获取body元素
            const body = document.body;
            if(body.className !== 'night'){//判断是否有night类
                body.className = 'night';// 没有night类名，则是白天，添加night类
            }else{
                body.className = '';// 当前是是晚上，去除night类
            }
        });

这里默认是白天的状态，在css里面提前写好一个夜晚的class属性night,当点击按钮时，就给body添加一个class属性night.有这个类存在时就去除night类，另外里面的太阳和月亮是通过伪元素进行添加的。这样的话相比上一版，JavaScript操作的是body的状态，而不是直接去操纵表现样式，样式部分全部交给CSS来实现

版本三

<body>
  <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>
</body>


body, html {
  width: 100%;
  height: 100%;
  max-width: 600px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  box-sizing: border-box;
}

.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}

div.pic img {
  width: 100%;
}

#modeCheckBox {
  display: none;/*隐藏多选按钮*/
}

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

#modeBtn {
  font-size: 2rem;
  float: right;
}

#modeBtn::after {
  content: '🌞';
}

#modeCheckBox:checked + .content #modeBtn::after {
  content: '🌜';
}

因为这个需求是纯展示类交互，故此最后一个版本没有写一段js代码就完整实现了上面的需求，这里重新修改了HTML文件的结构，使用<label>、<input type="checkbox">标签的特性，再CSS里面使用伪类:checked及兄弟选择器完成了这个零代码实现需求的方案，如果你把CSS中#modeCheckBox {display: none;/隐藏多选按钮/}这一段代码注释掉，就能更加清晰看到结构

avatar
文章
阅读
粉丝