JS动态创建link标签到head

最新推荐文章于 2023-08-30 19:02:50 发布

zuo_zuo_blog

最新推荐文章于 2023-08-30 19:02:50 发布

阅读量2.8k

点赞数 1

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/106236421

版权

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章 2 订阅

订阅专栏

方法一
添加新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    += '<link type="text/css" rel="stylesheet" href="css/style1920.css">';
            document.getElementsByTagName('head')[0].innerHTML = headHTML;
        }else {  //当分辨率为1366引入的css文件
            var headHTML = document.getElementsByTagName('head')[0].innerHTML;
            headHTML    += '<link type="text/css" rel="stylesheet" href="css/style1366.css">';
            document.getElementsByTagName('head')[0].innerHTML = headHTML;
        }

zuo_zuo_blog

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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');
复制链接

扫一扫