学习使用js和jquery修改css路径,实现html页面主题切换功能
- 效果图
- html代码
- jquery切换css关键代码
- js切换css关键代码
效果图
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) {$("#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>