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

徊忆羽菲2024-06-23 12:36

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

效果图

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关键代码

html 复制代码

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

js切换css关键代码

html 复制代码

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