JavaScript动态添加css样式和script标签

 更新时间:2016年07月19日 16:07:05   作者:924256520  
这篇文章主要介绍了JavaScript动态添加css样式和script标签的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

[动态添加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标签,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JS中for循环的四种写法示例(入门级)

    JS中for循环的四种写法示例(入门级)

    对于for循环相信大家再常用不过了,下面这篇文章主要给大家介绍了关于JS中for循环的四种写法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • OpenLayer学习之自定义测量控件

    OpenLayer学习之自定义测量控件

    这篇文章主要为大家详细 介绍了OpenLayer学习之自定义测量控件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • disable-devtool禁用web开发者工具保护网页源码

    disable-devtool禁用web开发者工具保护网页源码

    这篇文章主要为大家介绍了disable-devtool禁用web开发者工具保护网页源码的使用,防止源码泄露保护网站源码的最佳解决方案,一行代码就可以搞定,有需要的可以学习参考下
    2023-11-11
  • 微信小程序仿抖音视频之整屏上下切换功能的实现代码

    微信小程序仿抖音视频之整屏上下切换功能的实现代码

    这篇文章主要介绍了微信小程序仿抖音视频之整屏上下切换功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 一道超经典js面试题Foo.getName()的故事

    一道超经典js面试题Foo.getName()的故事

    Foo.getName算是一道比较老的面试题了,大致百度了一下在17年就有相关文章在介绍它,下面这篇文章主要给大家介绍了关于一道超经典js面试题Foo.getName()的相关资料,需要的朋友可以参考下
    2022-03-03
  • 微信小程序手机号码验证功能的实例代码

    微信小程序手机号码验证功能的实例代码

    这篇文章主要介绍了微信小程序手机号码验证功能的实例代码及微信小程序正则判断手机号的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • 只需五句话搞定JavaScript作用域(经典)

    只需五句话搞定JavaScript作用域(经典)

    javascript作用域是前端开发比较难理解的知识点,下面小编给大家提供五句话帮助大家很快的了解js作用域,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • javascript控制图片播放的实现代码

    javascript控制图片播放的实现代码

    这篇文章主要介绍了javascript控制图片播放的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • 九种js弹出对话框的方法总结

    九种js弹出对话框的方法总结

    九种js弹出对话框的方法总结,需要的朋友可以参考一下
    2013-03-03
  • javascript对HTML字符转义与反转义

    javascript对HTML字符转义与反转义

    这篇文章主要介绍了javascript对HTML字符转义与反转义,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12

最新评论