JS来回切换路径

最新推荐文章于 2023-10-19 09:38:33 发布

希望远方

最新推荐文章于 2023-10-19 09:38:33 发布

阅读量814

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_35698009/article/details/53874415

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
    <meta charset= "UTF-8" >
    <title>JS来回切换效果</title>
    <link rel="stylesheet" href="css/css1.css" type="text/css" id="skin">
</head>
<body>
<input id="inp1" type="button" value="切换皮肤">

<script>
    //JS实现
    var btn = document.getElementById("inp1");
    var skinCss = document.getElementById("skin");
    var flag = false;

    btn.onclick = function(){
        if(flag){//第一步：一开始直接false,这样就执行else代码
            skinCss.href = "css/css1.css";
            flag = false;//第三步：改写变量值为false,当又再次点击按钮时，会回到第一步，也就是先执行else代码
        }else{
            skinCss.href = "css/css2.css";
            flag = true;//第二步：else改写变量值为true,当再次点击按钮时，会先执行if
        }
    }

    //之前的错误代码如下，但是不知道为什么错了
//    btn.onclick = function(){//思考的是：通过判断href的路径是多少，然后改变其路径
//        if(skinCss.href == "css/css1.css"){//路径为css1时，则改变路劲为css2;
//            skinCss.href = "css/css2.css";
//        }else{
//            skinCss.href = "css/css1.css";//如果路径不为css1,则改路径为css1;
//        }
//    }
</script>
</body>

希望远方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS来回切换路径

html>head> meta charset= "UTF-8" > title>JS来回切换效果title> link rel="stylesheet" href="css/css1.css" type="text/css" id="skin">head>body>input id="inp1" type="button" value="切换皮肤">scrip
复制链接

扫一扫