JavaScript动态添加css样式和script标签

来源：阅读：1759 次日期：2016-08-01 14:13:32

温馨提示：小编为您整理了“JavaScript动态添加css样式和script标签”,方便广大网友查阅！

这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下

[动态添加css样式]

<html>

　　<head>

　　　　　　window.onload=function(){

　　　　　　　　var head=document.getElementsByTagName('head')[0];　　　　　//获取到head元素　

　　　　　　　　var link=document.createElement('link');　　　　　　　　　　　　 //创建link元素节点，也就是link标签

　　　　　　　　　　link.rel="stylesheet";　　　　　　　　　　　　　　　　　　　　//为link标签添加rel属性

　　　　　　　　　　link.href="basic.css";　　　　　　　　　　　　　　　　　　　　//为link标签添加href属性，属性值是css外链样式表的路径

　　　　　　　　head.appendChild(link);　　　　　　　　　　　　　　　　　　　　//将link元素节点添加到head元素子节点下

　}

　　　　</script>

　　</head>

　　<body>

　　</body>

</html>

[动态添加script标签]

原理同上

<html>

　　<head>

　　　　　　　window.onload=function(){

　　　　　　　　var head=document.getElementsByTagName('head')[0];　　　　　//获取到head元素　

　　　　　　　　var script=document.createElement('script');　　　　　　　　　　 //创建script标签

　　　　　　　　　　script.type="text/javascript";　　　　　　　　　　　　　　　　//为script标签添加type属性　　　　　　　　　

　　　　　　　　　　script.src="basic.js";　　　　　　　　　　　　　　　　　　　　//为script标签添加scr属性，属性值为js路径

　　　　　　　　head.appendChild('script');　　　　　　　　　　　　　　　　　　//将script标签添加到head的子节点下

}

　　　　</script>

　　</head>

　　<body>

　　</body>

</html>

以上所述是小编给大家介绍的JavaScript动态添加css样式和script标签，希望对大家有所帮助

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！