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对象和DOM对象相互转化
Apr 24 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
Jan 08 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 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
短波问题解答
2021/02/28 无线电
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
Jquery的Ajax技术使用方法
2019/01/21 jQuery
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
企划经理的岗位职责
2013/11/17 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
电子银行营销方案
2014/02/22 职场文书
儿童生日会策划方案
2014/05/15 职场文书
营销与策划专业求职信
2014/06/20 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
在职证明书模板
2015/06/15 职场文书
教师节领导致辞
2015/07/29 职场文书
KTV员工管理制度
2015/08/06 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
Navicat for MySQL的使用教程详解
2021/05/27 MySQL