1. //1、动态添加外部js文件
  2. function loadScript(url){
  3. var script = document.createElement("script");
  4. script.type = "text/javascript";
  5. script.src = url;
  6. document.body.appendChild(script);
  7. }
  8.  
  9. //2、动态添加js代码
  10. function loadScriptString(code){
  11. var script = document.createElement("script");
  12. script.type = "text/javascript";
  13. try{
  14. script.appendChild(document.createTextNode(code));
  15. }catch (e) { //兼容IE8-
  16. script.text = code;
  17. }
  18. document.body.appendChild(script);
  19. }
  20.  
  21. //3、动态添加外部css文件
  22. function loadStyles(url){
  23. var link = document.createElement("link");
  24. link.type = "text/css";
  25. link.rel = "stylesheet";
  26. link.href = url;
  27. var head = document.getElementsByTagName("head")[0];
  28.  
  29. head.appendChild(link);
  30. }
  31.  
  32. //4、动态添加css代码
  33. function loadStyleString(css) {
  34. var style = document.createElement("style");
  35. style.type = "text/css";
  36. try{
  37. style.appendChild(document.createTextNode(css));
  38.  
  39. }catch (e) {
  40. style.styleSheet.cssText = css; //兼容IE8-
  41. }
  42. var head = document.getElementsByTagName("head")[0];
  43. head.appendChild(style);
  44. }
  45.  
  46. loadScript("js/test.js");
  1. //加载完成就可以执行test.js中的内容了

  2. loadScriptString("function sayHi(){alert('hi');}");
  3. sayHi();
  4. loadStyles("css/test.css");
  5. loadStyleString("body{background-color:red}");
  1.  

动态创建js脚本和 css样式的更多相关文章

  1. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  2. 《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱

    一.admin页面布局及路由创建 0)cmd批量创建目录及子目录 //创建各个目录,及charts和子目录bar md home category product role user charts\b ...

  3. H5_0011:JS动态创建html并设置CSS属性

    1,创建html文本,并设置指定css样式 r = function(e) { var t = document.createElement("div"); t.innerHTML ...

  4. 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  5. js 设置 获取css样式

    先看一段代码,为了体现一会下面说的js用style获取css样式的不同 一:给div设置margin-left(用style设置css样式没什么问题) box.style.marginLeft=&qu ...

  6. 3.通过js代码设置css样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 5、通过js代码设置css样式

    1.页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  8. 通过js获取外部css样式

    通过js获取外部样式表中的属性,比如.box在style.css样式表中有个属性叫font-size:16px; 通过js获取.box的这个属性: js代码为: <script> wind ...

  9. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

随机推荐

  1. jq实时监测输入框内容改变

    $(document) .on('input propertychange','#telInput',function (e) { if (e.type === "input" | ...

  2. 13.python错误和异常

    一.错误和异常1.程序中的错误分为俩种:(1)语法错误:不按照语言的规则,必须在程序执行前就改正(2)逻辑错误2.异常就是程序运行时发生错误的信号,分为三部分(1)Traceback:异常追踪的信息( ...

  3. C++学习(三十九)(C语言部分)之 游戏项目(2048游戏)

    /***************************项目 2048**********************c语言编写 图形库制作时间:2019.04.03 准备工具: vs2013 图形库 i ...

  4. 用doxygen自动生成文档

    1. 添加符合doxygen解析规则的注释 (比如函数说明,函数参数/返回值说明) 用qt-creator可以在函数上方一行键入“/**”,然后直接回车,就可以自动生成默认的格式. 2. 安装doxy ...

  5. C语言strcmp()实现

    函数原型:    extern int strcmp(const char *s1,const char *s2); 比较两个字符串 设这两个字符串为str1,str2, 若str1=str2,则返回 ...

  6. Linux打开文件设置

    在某些情况下会要求增加Linux的文件打开数,以增加服务器到处理效率,在Linux下查看最多能打开的文件数量为: cat /proc/sys/fs/file-max 然后设置ulimit -n 文件数 ...

  7. HTTP响应过程

    完整的一次 HTTP 请求响应过程(一)http://mp.weixin.qq.com/s?__biz=MzUzMTA2NTU2Ng==&mid=2247484648&idx=1&am ...

  8. python eval()和exec()以及complie()

    1.eval() 函数 eval() 函数用来执行一个字符串表达式,并返回表达式的值. ------->>  eval(expression[, globals[, locals]]) 参 ...

  9. OS&SYS&Shuti模块

    #sys.argv   主要针对脚本可以读取参数 Shuti模块 import shutil f1=open('笔记',encoding='utf-8') f2=open('笔记2','w',enco ...

  10. 推导式_zip

    zip ''' 功能: 每次分别拿出一个iter内的元素, 配对组成元祖, 放入迭代器, 如果元素不够配对, 将舍弃后面的元素 参数:n个iterable 返回:迭代器 ''' # (1) 用zip形 ...