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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
vue prop传值类型检验方式
Jul 30 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php简单的会话类代码
2011/08/08 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php强制运行广告的方法
2014/12/01 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
心扬JS分页函数代码
2010/09/10 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
浅谈Python单向链表的实现
2015/12/24 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python实现C4.5决策树算法
2018/08/29 Python
python使用xlrd和xlwt读写Excel文件的实例代码
2018/09/05 Python
Python中的引用知识点总结
2019/05/20 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
python如何修改文件时间属性
2021/02/05 Python
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
销售总经理岗位职责
2014/03/15 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
回复函格式及范文
2015/07/14 职场文书
导游词之无锡古运河
2019/11/14 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android