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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
Javascript this 关键字 详解
Oct 22 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
Sep 29 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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网页显示各种语法错误
2013/09/23 PHP
php中实现精确设置session过期时间的方法
2014/07/17 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
用JavaScript获取页面文档内容的实现代码
2016/06/10 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
python与字符编码问题
2019/05/24 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
python如何删除列为空的行
2020/07/17 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
中学生教师节演讲稿
2014/09/03 职场文书
详解Js模块化的作用原理和方案
2021/04/29 Javascript
关于python中模块和重载的问题
2021/11/02 Python
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA