换肤功能

最新推荐文章于 2019-08-09 11:26:39 发布

chenLeiInTuling

最新推荐文章于 2019-08-09 11:26:39 发布

阅读量318

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/chenLeiInTuling/article/details/89959416

css 专栏收录该内容

1 篇文章

订阅专栏

博客介绍了一种换肤功能的实现方法。当<link>标签的rel属性设为alternate且title有值时，外部css文件不渲染，可通过js控制link的disabled属性为false，让其开始渲染，以此实现换肤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心：当<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>