UDN-企业互联网技术人气社区

板块导航

浏览  : 1323
回复  : 6

[原生js] JavaScript动态添加css样式和script标签

[复制链接]
饼干妹妹的头像 楼主
发表于 2017-1-11 14:06:29 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

  [动态添加css样式]

  1. <html>
  2.   <head>
  3.     <script type="text/JavaScript">
  4.       window.onload=function(){
  5.         var head=document.getElementsByTagName('head')[0];     //获取到head元素 
  6.         var link=document.createElement('link');             //创建link元素节点,也就是link标签
  7.           link.rel="stylesheet";                    //为link标签添加rel属性
  8.           link.href="basic.css";                    //为link标签添加href属性 , 属性值是css外链样式表的路径
  9.         head.appendChild(link);                    //将link元素节点添加到head元素子节点下
  10.         
  11.  }
  12.     </script>
  13.   </head>
  14.   <body>
  15.     <div id="div1">测试</div>
  16.   </body>
  17. </html>
复制代码

  [动态添加script标签]
  
  原理同上
  1. <html>
  2.   <head>
  3.     <script type="text/JavaScript">
  4.        window.onload=function(){
  5.         var head=document.getElementsByTagName('head')[0];     //获取到head元素 
  6.         var script=document.createElement('script');           //创建script标签
  7.           script.type="text/JavaScript";                //为script标签添加type属性         
  8.           script.src="basic.js";                    //为script标签添加scr属性,属性值为js路径
  9.         head.appendChild('script');                  //将script标签添加到head的子节点下
  10. }
  11.     </script>
  12.   </head>
  13.   <body>
  14.     <div id="div1">测试</div>
  15.   </body>
  16. </html>
复制代码

  以上所述是小编给大家介绍的JavaScript动态添加css样式和script标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关帖子

发表于 2017-1-11 14:06:56 | 显示全部楼层
有空一起交流一下
使用道具 举报

回复

发表于 2017-1-11 14:06:58 | 显示全部楼层
LZ是闲人,天天发帖,坚定完毕
使用道具 举报

回复

发表于 2017-1-11 14:06:59 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2017-1-11 14:07:00 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部