前端实现换肤

最新推荐文章于 2024-03-06 10:10:13 发布

koga007

最新推荐文章于 2024-03-06 10:10:13 发布

阅读量738

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_35504206/article/details/118938630

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、使用link标签rel="alternate stylesheet"动态换肤

link标签的rel属性

rel="stylesheet"属性指定将一个样式表立即应用到文档.

rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它

通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表

disabled = true;表示它不会立即生效

disabled = false;表示立即生效

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 换肤</title>
    <link rel="alternate stylesheet" type="text/css" href="red.css" title="红色"/>
    <link rel="alternate stylesheet" type="text/css" href="green.css" title="绿色"/>
    <link rel="stylesheet" type="text/css" href="default.css" title="默认"/>
</head>
<body>
选择样式：
<input id="default" type="radio" name="skin" value="default.css" checked><label for="default">默认</label>
<input id="red" type="radio" name="skin" value="red.css"><label for="red">红色</label>
<input id="green" type="radio" name="skin" value="green.css"><label for="green">绿色</label>
</body>

<script>
    const $ = document.querySelectorAll.bind(document);
    var eleLinks = $('link[title]');
    var eleRadios = $('input[type="radio"]');
    [].slice.call(eleRadios).forEach(function (radio) {
        radio.addEventListener('click', function () {
            var value = this.value;
            [].slice.call(eleLinks).forEach(function (link) {
                link.disabled = true;
                if (link.getAttribute('href') == value) {
                    link.disabled = false;
                }
            });
        });
    });
</script>
</html>

2、less实现换肤

注：该方法可以自定义样式，改变主题颜色。

需引入less.js

//在less样式表中使用变量
@themeColor: #33b8ff;


body{
  color: @themeColor;
}

//在js中通过window.less.modifyVars修改@themeColor
window.less.modifyVars({
    "@themeColor": "red"
})

koga007

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端实现换肤

1、使用link标签rel="alternate stylesheet"动态换肤link标签的rel属性rel="stylesheet"属性指定将一个样式表立即应用到文档.rel="alternate stylesheet"属性将其作为备用样式表而在默认情况下禁用它通过js拿到link标签对象,disabled属性设置,可以实现变化页面导入样式表disabled = true;表示它不会立即生效disabled = false;表示立即生效代码示例：<!DOCTYPE
复制链接

扫一扫