JavaScript插入动态样式实现代码

与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。

我们以下面这个典型的<link>元素为例：

<link rel="stylesheet" type="text/css" href="style.css">使用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);

以上代码在所有主流浏览器中都可以正常运行。需要注意的是，必须将<link>元素添加到<head>而不是<body>元素，才能保证在所有浏览器中的行为一致。整个过程可以用一下函数来表示：


代码如下:

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代码的过程没有固定的次序。

另一种定义样式的方式是使用<style>元素来包含嵌入式CSS，如下所示：

<style>
body { background-color: red; }
</style>

按照相同的逻辑，下列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将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。事实上，IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同。解决IE中的这个问题的办法，就是访问元素的styleSheet属性，该属性又有一个cssText属性，可以接受CSS代码，如下面的例子所示：


代码如下:

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}");

赞 (0)

相关推荐

  • jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

  • 点击button获取text内容并改变样式的js实现

    点击button获取text内容并改变样式的js实现

    需求:点击button获得input框中选中的内容,让选中的内容变红, 实现:代码如下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Test</title> <style type="text/css">

  • javascript插入样式实现代码

    javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用<style>标签插入页面样式(这里说的不是style属性). 一.页面中引入外部样式: 在<head>

  • 使用javascript插入样式

    一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中. 但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决. 还需要注意的就是在有些版本IE中一个页面上sty

  • ExtJS自定义主题（theme）样式详解

    本文基于Ext JS 4.2.1版本UI组件基础学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件.ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件.工具栏及菜单栏组件.表单及元素组件.其他组件.theme主题ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题. Sass

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • JavaScript插入动态样式实现代码

    与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式:动态样式是在页面加载完成后动态添加到页面中. 我们以下面这个典型的<link>元素为例: <link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素: 复制代码 代码如下: var link = document.createElement("link&qu

  • javascript实现动态统计图开发实例

    javascript实现动态统计图开发实例

    本文实例讲述了javascript实现动态统计图的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下 html代码: <div id="content"> <div class="legend"> <h1>汽车销量:</h1> <div class="skills"> <ul> <li class="jq">大众</

  • javascript 动态生成css代码的两种方法

    javascript 动态生成css代码的两种方法 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决.还需要注意的就是在有些版本IE中一个页面上style

  • JavaScript实现动态创建CSS样式规则方案

    现在Web应用中有大量的JavaScript代码,而我们也一直在追寻各种使他们更快的解决方案. 1.我们通过 事件代理(event delegation) 让事件监听更高效, 2.我们利用 函数降频技术(function debouncing)来限制一段时间内给定方法被调用的次数,请参考:如何防止事件函数的高频触发(中文翻译) 3.我们使用 JavaScript加载器 来加载我们确实需要的那部分资源,等等. 还有一种方式,可以让我们的页面更加的快速和高效.那就是直接通过JS动态地添加和删除样式表

  • 如何用JavaScript实现动态修改CSS样式表

    看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

  • javascript 动态样式添加的简单实现

    异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

  • Javascript 动态样式控制方法

    目录 方法一:使用style属性来设置 方法二:定义好类选择器的样式 方法一:使用style属性来设置 使用style属性来设置 html代码:     <div id="div1">         div     </div> Javascript代码: var div1 = document.getElementById("div1");         div1.onclick = function () {            

  • 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

    像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: 先给大家展示下测试结果: 未做任何选择时: 选择时: 代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>三级联动测试</titl

随机推荐