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 相关文章推荐
Jquery读取URL参数小例子
Aug 30 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
vue.js实现只能输入数字的输入框
Oct 19 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使用curl简单抓取远程url的方法
2015/03/13 PHP
PHP简单日历实现方法
2016/07/20 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
2016/05/23 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
Javascript的比较汇总
2016/07/25 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
js 原型对象和原型链理解
2017/02/09 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
详解Vue-cli webpack移动端自动化构建rem问题
2018/04/07 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
安全检查管理制度
2014/02/02 职场文书
个人自我鉴定总结
2014/03/25 职场文书
运动会开幕式主持词
2014/03/28 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
篮球社团活动总结
2014/06/27 职场文书
关于倡议书的范文
2015/04/29 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python