javascript - 关于动态改变<link>标签的href
本文介绍了javascript - 关于动态改变<link>标签的href的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如题，我创建了两个<li>分别给他们添加了点击事件，在<link>里我添加了id = "changecss",代码如下：
<link rel="stylesheet" type="text/css" id = "changecss" href="css/index.css">
<ul>
<li class="active" on click="javascript:document.getElementById('changecss').href ='css/index.css'">首页案例</li>
<li class = "li2" on click="javascript:document.getElementById('changecss').href ='css/change.css'">详情页案例</li>
</ul>但是还是无法改变<head>里的<link>标签里的href的路径，还是会加载原本的css,但新建的css文件里的css也有效果，所以特来向各位求助。。。。
解决方案
修改href属性确实会触发浏览器加载css，但是这样会带来很多新问题，其他元素css错乱等，不太好维护。比较好的做法是动态添加css。
给你提供个动态加载css的方法。
var addCss = function(path){
if(!path || path.length === 0){
throw new Error('argument "path" is required !');
}
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.href = path;
link.rel = 'stylesheet';
link.type = 'text/css';
head.appendChild(link);
};如果你不想加载css/index.css，一开始就不需要写<link rel="stylesheet" type="text/css" id = "changecss" href="css/index.css">
这篇关于javascript - 关于动态改变<link>标签的href的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
