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

学习使用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>
相关推荐
你的人类朋友5 分钟前
✍️Node.js CMS框架概述:Directus与Strapi详解
javascript·后端·node.js
啊~哈14 分钟前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
xiaogg367820 分钟前
vue+elementui 网站首页顶部菜单上下布局
javascript·vue.js·elementui
weixin_5275504029 分钟前
初级程序员入门指南
javascript·python·算法
钡铼技术ARM工业边缘计算机1 小时前
千元级PLC平台支持梯形图+Python双开发
javascript
高山我梦口香糖2 小时前
[electron]预脚本不显示内联script
前端·javascript·electron
moxiaoran57532 小时前
uni-app学习笔记三十--request网络请求传参
笔记·学习·uni-app
嘉陵妹妹2 小时前
深度优先算法学习
学习·算法·深度优先
拉不动的猪3 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
乖乖是干饭王3 小时前
Linux系统编程中的_GNU_SOURCE宏
linux·运维·c语言·学习·gnu