换肤功能

最新推荐文章于 2020-05-09 14:49:14 发布

chenLeiInTuling

最新推荐文章于 2020-05-09 14:49:14 发布

阅读量263

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/chenLeiInTuling/article/details/89959416

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

核心：当<link>标签rel="alternate" 和 title都设置值时。该外部css文件是不渲染的，可以通过js来控制该link 的disabled = false，使其开始渲染。从而达到换肤的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>换肤功能</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/default.css" title="默认">
    <link rel="alternate stylesheet" href="css/red.css" title="红色">
    <link rel="alternate stylesheet" href="css/skyblue.css" title="天蓝色">
</head>
<body>
<section>
</section>
<nav>
    <p>换肤：</p>
    <input id="default" type="radio" name="skin" value="css/default.css" checked><label for="default"></label>
    <input id="red" type="radio" name="skin" value="css/red.css"><label for="red"></label>
    <input id="green" type="radio" name="skin" value="css/skyblue.css"><label for="green"></label>
</nav>
<script>
    const eleLinks = document.querySelectorAll('link[title]'); //获取样式文件
    const radios = document.querySelectorAll('input[type=radio]'); //获取控制换肤颜色
    [...radios].forEach(item=>{
        item.addEventListener('click',function () {
            const value = this.value;
            [...eleLinks].forEach(item2=>{
                item2.disabled = true
                if(item2.href.includes(value)){
                    item2.disabled = false
                }
            })
        })
    })
</script>
</body>
</html>

chenLeiInTuling

关注

1
点赞
踩
0

收藏

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

核心：当<link>标签rel="alternate" 和 title都设置值时。该外部css文件是不渲染的，可以通过js来控制该link 的disabled = false，使其开始渲染。从而达到换肤的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...
复制链接

扫一扫