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 相关文章推荐
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
js与applet相互调用的方法
Jun 22 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
jQuery常用选择器详解
Jul 17 jQuery
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
ThinkPHP中I(),U(),$this-&gt;post()等函数用法
2014/11/22 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
window.open的功能全解析
2006/10/10 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
javascript实现禁止鼠标滚轮事件
2015/07/24 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
js实现简单模态框实例
2018/11/16 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
文明礼仪小标兵事迹
2014/01/12 职场文书
卖房协议书
2014/04/11 职场文书
女生节标语
2014/06/26 职场文书
美术专业自荐信
2014/07/07 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
解除施工合同协议书
2014/10/17 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
领导欢送会主持词
2015/07/06 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android