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 相关文章推荐
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
JS字符串截取函数实例
Dec 27 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
VUE实现日历组件功能
Mar 13 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
支付宝小程序实现省市区三级联动
Jun 21 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
Protoss魔法科技
2020/03/14 星际争霸
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python selenium 弹出框处理的实现
2019/02/26 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
实习期自我鉴定
2013/10/11 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
《老王》教学反思
2014/02/23 职场文书
廉政教育的心得体会
2014/09/01 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
整改通知书
2015/04/20 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android