【原理】看别人做了一个单页面换主题

最新推荐文章于 2025-03-30 17:05:30 发布

一只红薯

最新推荐文章于 2025-03-30 17:05:30 发布

阅读量845

点赞数 1

分类专栏：前端文章标签：前端 javascript

前端专栏收录该内容

4 篇文章

订阅专栏

原文地址：

http://www.blueidea.com/tech/web/2006/3183.asp

三个文件，分别是：

csstran.html

<!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>Document</title>

    <link rel="alternate stylesheet" type="text/css" title="b" href="b.css" />
    <link rel="stylesheet" type="text/css" title="a" href="a.css" />
    <!-- 默认主题A -->
</head>

<body>
    <h1>换css</h1>

    <input type="button" value="a" οnclick="setStyle('a');" />
    <input type="button" value="b" οnclick="setStyle('b');" />

    <script type="text/javascript">
        function setStyle(title) {

            //预定义变量
            var i, links;

            //用DOM方法获得所有的link元素
            links = document.getElementsByTagName("link");

            for (i = 0; links[i]; i++) {

                //判断此link元素的rel属性中是否有style关键字
                //即此link元素是否为样式表link
                //同时判断此link元素是否含有title属性
                if (links[i].getAttribute("rel").indexOf("style") != -1 &&
                    links[i].getAttribute("title")) {

                    //先不管三七二十一把它设为disabled
                    links[i].disabled = true;

                    //再判断它的title中是否有我们指定的关键字
                    if (links[i].getAttribute("title").indexOf(title) != -1)

                        //如果有则将其激活
                        links[i].disabled = false;
                }
            }
        }
    </script>
</body>

</html>

a.css

body{
    background-color: aqua;
    color:rgb(255, 168, 127);
}

b.css

body{
    background-color: rgb(0, 60, 255);
    color:rgb(53, 226, 218);
}