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


Posted in Javascript onJuly 19, 2016

[动态添加css样式]

<html>
<head>


<script type="text/javascript">



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>


<div id="div1">测试</div>

</body>
</html>

[动态添加script标签]

原理同上

<html>
<head>


<script type="text/javascript">



 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>


<div id="div1">测试</div>

</body>
</html>

以上所述是小编给大家介绍的JavaScript动态添加css样式和script标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 #Javascript
js基于cookie记录来宾姓名的方法
Jul 19 #Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 #Javascript
使用plupload自定义参数实现多文件上传
Jul 19 #Javascript
artDialog+plupload实现多文件上传
Jul 19 #Javascript
plupload+artdialog实现多平台上传文件
Jul 19 #Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
smarty表格换行实例
2014/12/15 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
使用js+jquery实现无限极联动
2013/05/23 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
iview实现select tree树形下拉框的示例代码
2018/12/21 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
vue使用微信扫一扫功能的实现代码
2020/04/11 Javascript
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
Python下简易的单例模式详解
2019/04/08 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
实验教师岗位职责
2014/02/13 职场文书
2014年3.15团委活动总结
2014/03/16 职场文书
妇女干部培训方案
2014/05/12 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
小学运动会报道稿
2014/10/04 职场文书
Spring Cloud Gateway去掉url前缀
2021/07/15 Java/Android
Python Pygame实战之塔防游戏的实现
2022/03/17 Python