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学习5 jQuery事件模型
Feb 07 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
用Node提供静态文件服务的方法
Jul 06 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
vue中实现上传文件给后台实例详解
Aug 22 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
php集成动态口令认证
2016/07/21 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JSON 数据格式详解
2017/09/13 Javascript
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
python对url格式解析的方法
2015/05/13 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
简单实现python收发邮件功能
2018/01/05 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
电力公司个人求职信范文
2014/02/04 职场文书
读书活动总结范文
2014/04/26 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
班级体育活动总结
2014/07/05 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
大学生求职意向书
2015/05/11 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python