DOM动态脚本和动态样式
动态脚本
【定义】
在页面加载时不存在,但将来的某一时刻通过修改DOM动态添加的脚本。
【方式】
【1】插入外部文件方式
var script = document.createElement("script"); script.type = "text/javascript"; script.src = "js.js"; document.body.appendChild(script);
使用函数封装如下:
function loadScript(url){ script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } loadScript("js.js");
【2】直接插入JavaScript代码
IE8-浏览器下使用appendChild或innerHTML都会报错,因为IE8-浏览器将<script>视为一个特殊的元素,不允许DOM访问其子节点。
var script = document.createElement("script"); script.type = "text/javascript"; //script.innerHTML = "alert('hi');"; //script.appendChild(document.createTextNode("alert('hi');")); document.body.appendChild(script);
【解决】使用<script>元素的text属性来指定Javascript代码
var script = document.createElement("script"); script.type = "text/javascript"; script.text = "alert('hi');"; document.body.appendChild(script);
【完美解决】safari3-浏览器不能正确支持text属性,但却允许使用文本节点,封装兼容函数如下
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); } loadScriptString("alert('hi!')");
动态样式
【定义】
在页面刚加载时不存在,加载完成后动态添加到页面中的样式。
【方式】
【1】插入外部文件方式
var link = document.createElement("link"); link.rel = "stylesheet"; link.type = "text/css"; link.href = "style.css"; var head = document.getElementsByTagName('head')[0]; head.appendChild(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); } loadStyles("style.css");
【2】直接插入css嵌入样式
var style = document.createElement("style"); style.type = "text/css"; //style.innerHTML = "body{background-color: red;}"; //style.appendChild(document.createTextNode("body{background-color: red;}")); var head = document.getElementsByTagName('head')[0]; head.appendChild(style);
如<script>标签类似,IE8-浏览器将<style>标签当作特殊的节点,不允许访问其子节点。IE10-浏览器支持使用styleSheet.cssText属性来设置样式。兼容写法如下:
function loadStyleString(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); } loadStyleString("body{background-color: red;}");
DOM动态脚本和动态样式的更多相关文章
- DOM操作技术之动态脚本与动态样式(兼容版)
动态脚本 使用<script>元素可以向页面中插入Javascript代码,一种方式是通过其src特性包含外部文件,另一种方式就是用这个元素本身来包含代码. 而我们要说的动态脚本,指的是在 ...
- JavaScript高级程序设计之动态脚本及动态样式
1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createEle ...
- JavaScript 动态脚本
动态脚本,指的是在页面加载时不存在,但将来的某一个时刻通过修改DOM动态添加的脚本. <script type="text/javascript"> function ...
- js插入动态脚本
原文章:https://www.w3cmm.com/dom/insert-javascript.html 动态脚本指的是在页面加载时不存在,但将来的某一时刻通过修改该DOM动态添加的脚本.和操作HTM ...
- 【前端基础】动态脚本与JSONP
博主入职两个月了,越来越感受到打好基础对于前端工程师的重要性,在向着狂拽酷炫的框架&构建工具高速狂奔之前,必须有一个坚实的基础打底,才不至于轻易翻车.所以博主最近一直在恶补<JS高级程序 ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- 浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
在<浏览器环境下JavaScript脚本加载与执行探析之defer与async特性>中,我们研究了延迟脚本(defer)和异步脚本(async)的执行时机.浏览器支持情况.浏览器bug以及 ...
- 【开源】.Net 动态脚本引擎NScript
开源地址: https://git.oschina.net/chejiangyi/NScript 开源QQ群: .net 开源基础服务 238543768 .Net 动态脚本引擎 NScript ...
- LR动态脚本的处理
在处理SSO修改密码脚本时遇到一个问题,根据用户名的不同,提交请求中数据会不一样.处理此问题,如果经分析用同类型的账号(每个账号含有的子账号类型和数目一致)测试与实际不同类型账号性能没有大的差别,则用 ...
随机推荐
- mysql 条件统计
问题描述为使讨论简单易懂,我将问题稍作简化,去掉诸多的背景. 从前有一个皇帝,他有50个妃子,这些妃子很没有天理的给他生了100,000个儿子,于是,皇帝很苦恼,海量的儿子很难管理,而且,他想知道每个 ...
- Zookeeper初次使用
下面介绍Linux系统中Zookeeper的初次使用方法. 1.jdk安装和zookeeper下载 首先从jdk官网中下载jdk文件,然后将文件放在/usr/local/java目录下解压,并打开.b ...
- haproxy的使用
假如 www.example.com想要使用haproxy作为代理,则要在自己的 dns服务器设置AAAA记录对应于haproxy机器的IP. 这样访问www.example.com其实就访问了hap ...
- python string intern
python 字符串是不可变的. 字符串pool会对 t "looklike" Python identifiers 字符串做intern缓存.
- LEFT JOIN 多表查询的应用
表结构如下:只把主要字段列出 表一:付款记录表 Gather 字段:GatherID , AccountID, PayMents 金额, PayWay 付款方式 1 现金 2 刷卡 表2:销售记录 ...
- 你以为的ASP.NET文件上传大小限制是你以为的吗
我们以为的文件大小限制 我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.confi ...
- 《C#图解教程》读书笔记之二:存储、类型和变量
本篇已收录至<C#图解教程>读书笔记目录贴,点击访问该目录可获取更多内容. 一.类型初窥:掀起你的盖头来 (1)C程序是一组函数和数据类型,C++程序是一组函数和类,而C#程序是一组类型声 ...
- [PCB制作] 1、记录一个简单的电路板的制作过程——四线二项步进电机驱动模块(L6219)
前言 现在,很多人手上都有一两个电子设备,但是却很少有人清楚其中比较关键的部分(PCB电路板)是如何制作出来的.我虽然懂点硬件,但是之前设计的简单系统都是自己在万能板上用导线自己焊接的(如下图左),复 ...
- 简单JavaScript模版引擎优化
在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...
- redis系列-redis的连接
Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...