提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

HTML5 换肤的三种方案

html5 方案 三种 换肤
2023-09-11 14:22:54 时间

换肤的三种方案

  • 通过id获取link元素，修改href属性
  • 使用css自定义变量来设置颜色
  • rel=”alternate stylesheet”并且title属性必须存在(常规style不应该设置title)，此事将作为备用样式表而在默认情况下disabled。可在js中修改disabled的值。document.querySelectorAll(“link[rel^=alternate]”)

测试代码

  • index.html
<!doctype html>
<html>
<head>
    <meta charset="utf8">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="" id="customStyle"/>
    <link rel="alternate stylesheet" title="customStyle" href="css/red.css"/>
    <link rel="alternate stylesheet" title="customStyle" href="css/green.css"/>  
    <link rel="alternate stylesheet" title="customStyle" href="css/blue.css"/>
    <script>
        console.log(navigator.userAgent);
        var styleHrefArr = ["", "red.css", "green.css", "blue.css"];
        var styleColorArr = ["white", "red", "green", "blue"];
        var styleIndex = 0;
        var way = 0;
        function changeStyle(){
            styleIndex = (styleIndex + 1) % styleColorArr.length;
            switch(way) {
                case 0:
                    var style = document.getElementById("customStyle");
                    style.setAttribute("href", "css/" + styleHrefArr[styleIndex]);
                break;
                case 1:
                    var style = document.getElementById("style");
                    document.documentElement.style.setProperty("--color", styleColorArr[styleIndex]);
                break;
                case 2:
                    var elems = document.querySelectorAll("link[rel^=alternate]");
                    elems.forEach(function(item, index) {
                        item.disabled = !((styleIndex-1) == index);
                    });
                break;
            }

        }
    </script>
</head>
<body>
    <button onclick="changeStyle()"> hello</button>
</body>
</html>
  • main.css
:root {
    --color: black;
}
body {
    background-color: var(--color);
}

注意点

以上方法切换主题，由于优先级问题，main.css不能是”行内”或”内嵌”的，只能是”外联”的。且main.css必须最先声明

相关文章