动态脚本

使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码。

而我们要说的动态脚本,指的是在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。跟操作HTML一样,创建动态脚本

也有两种方式:插入外部文件和直接插入Javascript代码

插入外部文件

function loadScript(url){
var script=document.createElement("script");
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
}

直接插入Javascript代码

/*IE将<script>视为一个特殊的元素,不允许DOM访问其子节点,
*因此会报错;除IE外,其他浏览器均支持appendChild方法;Safari 3.0
*以前的版本不能正确的支持text,所以最好也使用appendChild方法。
*总而言之,仅IE try会报错,然后进入catch块,其他浏览器try不报错*/
function loadScriptString(code){
var script=document.createElement("script");
script.type="text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text=code;
}
document.body.appendChild(script);
}

动态样式

能够把CSS样式包含到HTML页面中的元素有两个。其中,<link>元素用于包含来自外部的文件,而<style>元素用于指定嵌入的样式。与动态脚本

类似,所谓动态样式是指在页面刚加载时不存在的样式;动态样式是在页面加载完成后动态添加到页面中。

link方式

function loadStyles(url){
var link=document.createElement("link");
link.rel="stylesheet";
link.type="text/css";
link.href=url;
var head=document.getElementsByTagName("head")[0];
head.appendChild(link);
}

style方式

//引入try catch的原因同直接插入Javascript代码的原因一致
function loadStylesString(css){
var style=document.createElement("style");
style.type="text/css";
try{
style.appendChild(document.createTextNode(css));
}catch(ex){
style.styleSheet.cssText=css;
}
var head=document.getElementsByTagName("head")[0];
head.appendChild(style);
}

结语:如果此文章当你有所帮助,请点击“推荐”,谢谢

DOM操作技术之动态脚本与动态样式(兼容版)的更多相关文章

  1. DOM动态脚本和动态样式

    动态脚本 [定义] 在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本. [方式] [1]插入外部文件方式 var script = document.createElement(&qu ...

  2. JavaScript高级程序设计之动态脚本及动态样式

    1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createEle ...

  3. JavaScript 动态脚本

    动态脚本,指的是在页面加载时不存在,但将来的某一个时刻通过修改DOM动态添加的脚本. <script type="text/javascript"> function ...

  4. js插入动态脚本

    原文章:https://www.w3cmm.com/dom/insert-javascript.html 动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该DOM动态添加的脚本.和操作HTM ...

  5. 【前端基础】动态脚本与JSONP

    博主入职两个月了,越来越感受到打好基础对于前端工程师的重要性,在向着狂拽酷炫的框架&构建工具高速狂奔之前,必须有一个坚实的基础打底,才不至于轻易翻车.所以博主最近一直在恶补<JS高级程序 ...

  6. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  7. 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...

  8. 【开源】.Net 动态脚本引擎NScript

    开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务  238543768 .Net 动态脚本引擎 NScript   ...

  9. LR动态脚本的处理

    在处理SSO修改密码脚本时遇到一个问题,根据用户名的不同,提交请求中数据会不一样.处理此问题,如果经分析用同类型的账号(每个账号含有的子账号类型和数目一致)测试与实际不同类型账号性能没有大的差别,则用 ...

随机推荐

  1. windows下配置非安装版的MySQL5.6

    Installing MySQL on Microsoft Windows Using a noinstall Zip Archive,在Windows上使用非安装压缩包安装MySQL.安装步骤如下: ...

  2. List转Datatable 新方法

    方法1,最简单的转换 DataTable dt = new DataTable(); dt.Columns.Add("id"); dt.Columns.Add("name ...

  3. Select/Poll/Epoll异步IO

    IO多路复用 同步io和异步io,阻塞io和非阻塞io分别是什么,有什么样的区别? io模式 对于一次io 访问(以read为例),数据会先拷贝到操作系统内核的缓冲区,然后才会从操作系统内核的缓冲区拷 ...

  4. Vue 简单的总结二

    表单输入绑定 数据双向绑定 v-model 绑定相同的属性 当属性变化绑定的标签内容也跟着变化 v-model 只能应用像在input textare select 标签 v-model.lazy 懒 ...

  5. Variable hoisting Function hoisting

    Variable hoisting Another unusual thing about variables in JavaScript is that you can refer to a var ...

  6. Collection Types

    [Collection Types] 1.Arrays store ordered lists of values of the same type. Value必须是同一类型. 2.Array的原型 ...

  7. SQL Server2012中的Throw语句尝试 RAISERROR和THROW比较

    SQL SERVER2012实现了类似C#抛出异常的Throw语句.相比较于SQL Server2005之前使用@@ERROR,和SQL Server2005之后使用RAISERROR()引发异常都是 ...

  8. 代理模式 静态代理、JDK动态代理、Cglib动态代理

    1 代理模式 使用代理模式时必须让代理类和被代理类实现相同的接口: 客户端通过代理类对象来调用被代理对象方法时,代理类对象会将所有方法的调用分派到被代理对象上进行反射执行: 在分派的过程中还可以添加前 ...

  9. 在C语言中如何嵌入python脚本

    最近在写配置文件时,需要使用python脚本,但脚本是一个监控作用,需要它一直驻留在linux中运行,想起C语言中能够使用deamon函数来保留一个程序一直运行,于是想到写一个deamon,并在其中嵌 ...

  10. c语言实践:求两个数的最大公约数

    我的思路是这样的:比如12和16这两个数.先理解一下概念,什么叫最大公约数.就是12有很多个因数,16也有很多个因数,这两堆因数中有一些重合的因数,在这些重合的因数中找到那个最大的.那么最大公约数一定 ...