JavaScript一键换肤

最新推荐文章于 2024-01-18 08:45:31 发布

张小益达

最新推荐文章于 2024-01-18 08:45:31 发布

阅读量1.5k

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41033913/article/details/104065351

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

场景叙述：点击某一个按钮，能够加载一个新的css文件，并且页面进行相应的更改

还写了一篇使用alternate stylesheet更改样式的文章，各有优缺使用link的rel属性一键换肤

// index.html ---->需要引入一个style1.css和index.js文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一键换肤</title>
    <link rel="stylesheet" href="./style1.css" />
  </head>
  <body>
    <div class="root">hello</div>
    <button id="changbtn">改变颜色</button>
    <script src="./index.js"></script>
  </body>
</html>

另外需要准备一个style2.css进行替换

// style1.css
.root {
  color: red;
}
// style2.css
.root {
  color: blue;
}

js需要实现的功能就是，当用户点击button的时候，能够加载style2.css并且页面进行相应的变化

let btn = document.getElementById('changbtn');
let changeStyleName = 'style2';

let change = name => {
  let link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = name + '.css';
  document.head.appendChild(link);
};

btn.addEventListener('click', _ => {
// 进行解耦,方便后期更改
  change(changeStyleName);
});

Tips:应用的场景应该是html中没有行内样式,所有的样式放在一个个css文件中,毕竟行内样式的优先级最高,除了一个个进行更改别无选择,整体的思想是利用css代码的覆盖性,即如果有相同的样式,后面的样式会覆盖前面的样式,而不是替换

张小益达

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript一键换肤

场景叙述：点击某一个按钮，能够加载一个新的css文件，并且页面进行相应的更改// index.html ---->需要引入一个style1.css和index.js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta nam...
复制链接

扫一扫