学习使用js和jquery修改css路径,实现html页面主题切换功能

学习使用js和jquery修改css路径,实现html页面主题切换功能

效果图

请添加图片描述

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改css路径</title>
    <link href="./css/edit1.css" type="text/css" rel="stylesheet" id="mylink">
</head>
<body>
<div>
    <button onclick="editcss('edit1')"> 修改css1路径</button>
    <button onclick="editcss('edit2')"> 修改css2路径</button>
</div>

<script src="./jquery-2.1.4.min.js"></script>
<script>
    function editcss(css_name) {
      
      
        //document.getElementById('mylink').href = "./css/" + css_name + ".css";
        $("#mylink").attr('href', "./css/" + css_name + ".css");
    }
</script>

</body>
</html>

jquery切换css关键代码

<script>
    function editcss(css_name) {
      
      
       $("#mylink").attr('href', "./css/" + css_name + ".css");
    }
</script>

js切换css关键代码

<script>
    function editcss(css_name) {
      
      
      document.getElementById('mylink').href = "./css/" + css_name + ".css";
    }
</script>

猜你喜欢

转载自blog.csdn.net/guo_qiangqiang/article/details/139804237