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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
Dec 09 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
vue动态设置页面title的方法实例
Aug 23 Javascript
vue中是怎样监听数组变化的
Oct 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伪造referer实例代码
2008/09/20 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
实例浅析js的this
2016/12/11 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
在Django的URLconf中进行函数导入的方法
2015/07/18 Python
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python 导入数据及作图的实现
2019/12/03 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
为什么要使用servlet
2016/01/17 面试题
农村党支部先进事迹
2014/01/14 职场文书
个人投资合作协议书
2014/10/12 职场文书
党的群众路线教育实践活动心得体会范文
2014/11/05 职场文书
计算机专业自荐信
2015/03/05 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript