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 相关文章推荐
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
prototype.js简单实现ajax功能示例
Oct 18 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
vuex入门最详细整理
Mar 04 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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
使用adodb lite解决问题
2006/12/31 PHP
php注册登录系统简化版
2020/12/28 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
js 颜色选择插件
2017/01/23 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
Vue中定义全局变量与常量的各种方式详解
2017/08/23 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
js中的闭包学习心得
2018/02/06 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
公职人员索取回扣检举信
2014/04/04 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
医药销售自我评价200字
2014/09/11 职场文书
校园开放日新闻稿
2015/07/17 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫