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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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
10个php函数实用却不常见
2015/10/13 PHP
PHP session 会话处理函数
2016/06/06 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
基于Python闭包及其作用域详解
2017/08/28 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
英国电器零售商:PRC Direct
2018/06/21 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
经贸韩语专业大学生职业规划
2014/02/14 职场文书
生产厂长岗位职责
2014/02/21 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
药剂专业自荐书
2014/06/20 职场文书
2014年财政所工作总结
2014/11/22 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android