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 相关文章推荐
js停止输出代码
Jul 20 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
Dec 24 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
Jun 03 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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实现将base64编码字符串转换成图片示例
2018/06/22 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
使用正则替换变量
2007/05/05 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
AngularJS  ng-repeat遍历输出的用法
2017/06/19 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
2019/03/28 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
python3操作mysql数据库的方法
2017/06/23 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
PHP数据运算类型都有哪些
2013/11/05 面试题
乡镇三项教育实施方案
2014/03/30 职场文书
团代会开幕词
2015/01/28 职场文书
师德师风培训感言
2015/08/03 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
宝塔更新Python及Flask项目的部署
2022/04/11 Python