Css&JS实现一键背景切换

我叫汪枫

已于 2024-03-28 06:41:01 修改

阅读量352

点赞数

文章标签： javascript css 前端

于 2023-02-22 23:45:48 首次发布

本文链接：https://blog.csdn.net/weixin_47121832/article/details/129172917

版权

Css & Js背景切换

本次效果参照yao大叔写前端很帅实现跟着yao大叔学习有饭吃

本次实现需要对于小白来说需要注意

一：Link属性

要使其成为替代样式表，请将单词“ alternate”添加到rel属性。
要使其成为首选样式表，请添加title属性：
什么都不加就是持久样式

二：

我们在使用自定义属性时最好以data开头 data-xxx 然后我们在后面获取这个属性时通过dataset.xxx获取

源码

index

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点击按钮改变背景</title>
    <!--
       知识点一:
       要使其成为替代样式表，请将单词“ alternate”添加到rel属性。
       要使其成为首选样式表，请添加title属性：
       什么都不加就是持久样式
       
     -->
    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 首选样式 有title 没有 alternate -->
    <link
      rel="stylesheet"
      href="./css/themem-black.css"
      title="默认是黑色"
      data-color="black"
    />
    <!-- 备用样式 有disable 我们让他上来不要加载 后期我们通过js来把disable切换为true就能用了 在加一个alternate让他成为替代样式-->
    <!-- 注意这里如果alternate 也有title 默认禁用 是可以选择 但是这里一定要加上 disable才能生效 -->
    <!-- 注意我们需要在吧disabled干掉以后我们需要让干掉的样式设置为首选样式所以我们每个样式都要加上title  -->
    <link
      rel="stylesheet alternate"
      href="./css/themem-blue.css"
      disabled
      data-color="blue"
      title="蓝色"
    />
    <link
      rel="stylesheet alternate"
      href="./css/themem-red.css"
      disabled
      data-color="red"
      title="红色"
    />
    <link
      rel="stylesheet alternate"
      href="./css/themem-white.css"
      disabled
      data-color="white"
      title="白色"
    />
    <!-- 
      在上面的样式中我们每一个都给他加上一个自定义属性 data-color="xxx" 主要目的是我们后期通过js获取的时候有个判断的条件
     -->
  </head>
  <body>
    <div class="container">
      <!-- 
        section是h5 的语义化标签 
        一个 section 元素通常由内容以及标题组成，表示一个内容区块。
        理解：
        section中可以包含h1h1、h2…h6标签，表示文档结构
        section标签用于标识页面上重要内容部分
        该标签类似将一本书分成几个章节
       -->
      <section class="title">效果至上</section>
      <section class="switch-btns">
        <!-- 
          这里也有一些自定义属性 后期js好判断一点
         -->
        <div class="btn white" data-color="white"></div>
        <div class="btn black" data-color="black"></div>
        <div class="btn blue" data-color="blue"></div>
        <div class="btn red" data-color="red"></div>
      </section>
    </div>
    <script src="./index.js"></script>
  </body>
</html>

// 获取一些document对象
const doc = document;
// 获取一下主题树
const themes = [
  doc.querySelector('link[data-color="blue"]'),
  doc.querySelector('link[data-color="black"]'),
  doc.querySelector('link[data-color="red"]'),
  doc.querySelector('link[data-color="white"]'),
  //查询页面中的link含有data-color="xxx"的标签 因为我们要把他的disable改变为true
];
// 获取一下按钮
const btns = doc.querySelectorAll(".btn");
btns.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    // getAttribute()方法用于获取xxx属性值
    const theme = btn.getAttribute("data-color");
    // 这里我们来调用一下window上的方法来切换我们的主题
    this.SwitchThemeColor(theme);
    console.log(theme);
  });
});

function SwitchThemeColor(theme) {
  themes.forEach((LinkTheme) => {
    console.log(LinkTheme);
    if (LinkTheme.dataset.color === theme) {
      // 这里呢我们根据我们的自定义属性来判断点击的是什么颜色
      LinkTheme.disabled = false;
    } else {
      LinkTheme.disabled = true;
    }
  });
}

Reset

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  /*
  　vh是css中的一个相对长度单位，相对于视窗的高度, 视窗被均分为100单位的vh，即1vh永远等于当前视窗高度的百分之一。
　　视窗被均分为100单位的vh。vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。
　　视区所指为浏览器内部的可视区域大小， 即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
　　因此，100vh就等于当前浏览器的视窗高度，即浏览器内部的可视区域的高度大小。
　　设置height:100vh，不论元素没有内容，该元素都会被撑开与屏幕高度一致 
   */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 这里的布局我第一次见我们给body设置直接让所有元素都能剧中 */
  transition: background-color 0.5s ease-in-out;
  /* 这里给他一个动画效果让他后期切换顺滑一点---效果至上 */
}
.container .title {
  text-align: center;
  font-size: 32px;
  font-weight: 700px;
  letter-spacing: 2px;
  /* 不想让用户选中 */
  user-select: none;
  transition: color 0.5s ease-in-out;
}
.container .switch-btns {
  /* 让他变一下flex布局要不然他是块元素不能在一行 */
  display: flex;
  margin-top: 32px;
}
.container .switch-btns .btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  user-select: none;
  cursor: pointer;
  margin-left: 5px;
}
.container .switch-btns .white {
  background-color: white;
}
.container .switch-btns .black {
  background-color: black;
}

.container .switch-btns .blue {
  background-color: blue;
}

.container .switch-btns .red {
  background-color: red;
}