html中插入gif的代码,JavaScript插入动态样式实现代码
与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式;动态样式是在页面加载完成后动态添加到页面中。
我们以下面这个典型的元素为例:
使用DOM代码可以很容易的动态创建出这个元素:
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")
加载外部样式文件的过程是异步的,也就是加载样式与执行JavaScript代码的过程没有固定的次序。
另一种定义样式的方式是使用
body { background-color: red; }
按照相同的逻辑,下列DOM代码应该是有效的:
var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
以上代码可以在Firefox、Safrai、Chrome和Opera中运行,在IE中则会报错。IE将
var style = document.createElement("style");
style.type = "text/css";
try {
style.appendChild(document.createTextNode("body{background-color:red}"));
} catch (ex) {
style.styleSheet.cssText = "body{background-color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);
与动态添加嵌入式脚本类似,重写后的代码使用了try-catch语句来捕获IE抛出的错误,然后再使用针对IE的特殊方式来设置样式。一次通用的解决方案如下:
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}");
html中插入gif的代码,JavaScript插入动态样式实现代码相关推荐
- jquery 中加入html代码,jquery实现动态添加html代码
先看下思导图,整体了解下,然后我们再来学习. 现在我们来看一下几段代码,然后根据这几段代码我们来学习一下如何正确的学习动态添加html. 一.html()方法 html函数的作用原理首先是移除目标元素 ...
- WebPart(SharePoint)中如何使用自定义的Javascript和css样式
由于SharePoint WebPart 不像asp.net,可以拖拽控件,而且没有前台代码.你只能发布倒sharepoint上进行浏览.由于没有前台的HTML,只有后台的cs文件.所以不能通过通常的 ...
- 计算器html js php代码,JavaScript计算器网页版实现代码分享
JavaScript网页计算器代码,该计算器是用DW写的! HTML篇 计算器 > C ← ± + 7 8 9 - 4 5 6 × 1 2 3 ÷ 0 ▪ = CSS篇 @charset &qu ...
- html表单验证js代码,JavaScript表单验证实现代码
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输 ...
- php 放大镜代码,JavaScript实现简单放大镜效果代码
本文主要和大家介绍了原生JavaScript实现的简单放大镜效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下,希望能帮助到大家. 原理:其实所谓的放大就是 ...
- php实现开关效果代码,JavaScript实现开关效果的代码分享
本文给大家分享一段简单的代码基于js实现开关灯效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧 废话不多说了,直接给大家贴代码了,具体代码如下所示: 开关灯 html, body { ...
- html中单选按钮居中代码,Html单选按钮自定义样式(示例代码)
前言: 某天,写了一个带有单选按钮的界面,突然想起网上其他网站各种各样的单选按钮,遂想"改下这个圆圈圈怎么样?",于是在找了一遍单选按钮的样式,没一个说是修改圆圈圈,于是又去网上找 ...
- php页面价格排序代码,php 数组动态添加实现代码(最土团购系统的价格排序)
核心代码如下: 复制代码代码如下: $now=time(); $oc = array( 'team_type' => 'normal', "begin_time < '{$now ...
- 邮件发送html, 分别用p,code,xmp三个标签嵌入代码段后的样式比较
邮件发送html, 分别用p,code,xmp三个标签嵌入代码段后的样式比较 代码 测试代码 效果 展示代码块整体效果 因为在工作中经常使用邮件来进行一些异常告警和通知, 所以会在邮件中直接附带日志, ...
最新文章
- 16位灰度数据成像_16位 250M双通道PCI数据采集卡 FCFR-PCI9808
- ObjectFactory对象工厂类
- JS实现生成一个周对应日期数组
- vue 子父组件周期顺序_父组件和子组件生命周期钩子执行顺序是什么?
- Python爬虫入门四urllib库的高级用法
- 对象删除某个属性_充分了解JavaScript中【对象】的概念(二)
- pandas把'm8[ns]'类型转换为int类型进行运算
- 基于Kubernetes集群部署skyDNS服务
- Java(Jdk1.8)通过ODBC 连接数据库(以SQLServer为例)
- windows7计算机图片,win7照片查看器无法显示图片计算机可用内存不足 需要技巧...
- 机器学习笔记 - 什么是先验算法(Apriori Algorithm)?
- mysql trigger 设置错误ERROR1419
- Exchange Server 2013 VS 2016
- Win10,详细永久关闭更新方法(附图文)
- 程序员必备git客户端PortableGit-2.34.0-64-bit.7z.exe
- Cocos2dx 3.1.1 之 加速传感器、监听物理按键
- 趣学算法14天阅读|Day1
- vb.net图书管理系统VS开发sqlserver数据库web结构vb编程源码网页
- 智慧城市同城V4 v2.2.8 同城 同城小程序 同城信息
- Charles抓Https
热门文章
- SAP EPIC 银企直连 系列知识分享
- iOS开发---如何查看iPhone手机的UUID
- to_string函数的用法
- java回调函数的生命_indexDB出坑指南
- 【ODX Studio编辑PDX】-0.3-如何删除/修改Variant变体中继承的(Inherited)元素
- 面试阿里被问到JVM,不逼逼赖赖,直接盘给面试官看!!!
- 网络地址转换(NAT)(一)
- 【博客话题】谈谈我工作的 入门恩师---“小武”
- matlab读mif文件,关于QuartusII里面调用MATLAB里生成的mif文件的一些问题(转)
- 安卓框架之二维码框架zxing的快速上手