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 相关文章推荐
IE php关于强制下载文件的代码
Aug 23 Javascript
Javascript计算时间差的函数分享
Jul 04 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
单击某一段文字改写文本颜色
Jun 06 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 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
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
js导出excel文件的简洁方法(推荐)
2016/11/02 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
python查找第k小元素代码分享
2013/12/18 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python 6种方法实现单例模式
2020/12/15 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
一道Delphi上机题
2012/06/04 面试题
个人职业生涯规划书1500字
2013/12/31 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
积极向上的团队口号
2014/06/06 职场文书
员工保密协议书
2014/09/27 职场文书
采购员岗位职责范本
2015/04/07 职场文书
有关水浒传的读书笔记
2015/06/25 职场文书
关于童年的读书笔记
2015/06/26 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书