JS动态创建link标签到head
方法一
添加新link可行，因为页面度加载完毕. html就不会变化了 不管用js怎么改源代码不会变。添加新link就用head.appendChild()。
var linkzh = document.createElement('link');
linkzh.setAttribute('hreflang','zh');
linkzh.setAttribute('rel','alternate');
linkzh.setAttribute('href','hhttp://www.badidu.com');
document.head.appendChild(linkzh);
<!doctype html>
<html>
<head>
<title>creat a link</title>
<script type="text/javascript">
onload = function(){
var link = document.createElement('link');
link.setAttribute('type','text/css');
link.setAttribute('rel','stylesheet');
link.setAttribute('href','https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css');
document.head.appendChild(link);
}
</script>
</head>
<body>
<p class="text-primary">这是一段话e799bee5baa6e59b9ee7ad9431333363383965，样式是动态创建的引用bootstrap的样式</p>
</body>
</html>
方法2
代码实现的功能：
通过判断电脑分辨率，不同的分辨率显示不同的css文件
我的需求只需要适配两个分辨率
var scrWidth = window.screen.width; //获取当前分辨率的大小
if(scrWidth == 1920){ //当分辨率为1920是应该引入的css
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}else { //当分辨率为1366引入的css文件
var headHTML = document.getElementsByTagName('head')[0].innerHTML;
headHTML += '';
document.getElementsByTagName('head')[0].innerHTML = headHTML;
}