学习使用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>
相关推荐
鱼樱前端8 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
coding随想18 分钟前
JavaScript中的原始值包装类型:让基本类型也能“变身”对象
开发语言·javascript·ecmascript
qq_3863226923 分钟前
华为网路设备学习-24(路由器OSPF - 特性专题)
学习·华为·智能路由器
满分观测网友z33 分钟前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu35 分钟前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
Themberfue39 分钟前
Vue ⑥-路由
前端·javascript·vue.js
whatever who cares41 分钟前
React hook之useRef
前端·javascript·react.js
viperrrrrrrrrr71 小时前
大数据学习(132)-HIve数据分析
大数据·hive·学习
天涯学馆1 小时前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试