能够把CSS样式包含到HTML页面中的元素有两个。其中，<link>元素用于包含来自外部的文件，而<style>元素用于指定嵌入的样式。与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。
我们以下面这个典型的<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}");
相关推荐
用法javascript插入样式_.docx
javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。 ...
一、用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。 但有些...
javascript插入样式在前端开发中应用比较广泛，特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮，就会在别的站点页面下插入一个脚本，执行，这其中包含了样式的插入。 ...
内容包括JavaScript的基础知识，预定义对象和方法，JavaScript应用程序的示例，Java、ActiveX和插入件通信，JavaScript样式单对Web文档的控制方式、IE对DHTML脚本的支持及利用等。 本书还介绍了许多深层话题，如CGI...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上...
14.11.2 JavaScript如何操作样式表 14.11.3 style对象 14.11.4 className属性 14.11.5 下拉菜单和提示框 14.12 应知应会 练习 第15章 W3C DOM与JavaScript 15.1 W3C DOM ...
18.52 调用插入件 第19 章 网上购物系统 19.53 示 例 特 性 19.54 源 代 码 19.55 功 能 概 述 19.56 程 序 详 解 第20 章 2000 珍藏版 20.57 Cookie 入 门 20.58 实 例 特 性 20.59 程序源代码 20.60 功 能 概 述 ...
19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML...
主要介绍了JavaScript实现动态创建CSS样式规则方案,本文包含获取样式表、创建样式表、插入规则、添加规则等内容,需要的朋友可以参考下
相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery，那么用jQuery在创建...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
19.15 动态加载JavaScript文件 19.16 防止JavaScript文件被其他站直接引用 19.17 检查机器是否安装Word 19.18 打印当前页 19.19 打印预览 19.20 隐藏不想打印的页面内容 19.21 使用ExecWB直接打印 19.22 动态绑定XML...
15.6 创建、插入和删除节点382 15.7 例子：生成目录表387 15.8 文档和元素的几何形状和滚动389 15.9 HTML表单396 15.10 其他文档特性404 第16章 脚本化CSS410 16.1 CSS概览411 16.2 重要的CSS属性...
本书要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScriptAPI。本书第6版涵盖了HTML5和ECMAScript5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增的章节包括jQuery、服务器端...
15.6 创建、插入和删除节点 382 15.7 例子：生成目录表 387 15.8 文档和元素的几何形状和滚动 389 15.9 html表单 396 15.10 其他文档特性 404 第16章 脚本化css 410 16.1 css概览 411 16.2 重要的css属性 416 16.3 ...
《JavaScript权威指南（第6版）》主要讲述的内容涵盖JavaScript语言本身，以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5，很多章节完全重写，增加了当今Web开发的最佳实践的内容，新增...
15.6 创建、插入和删除节点382 15.7 例子：生成目录表387 15.8 文档和元素的几何形状和滚动389 15.9 HTML表单396 15.10 其他文档特性404 第16章 脚本化CSS410 16.1 CSS概览411 16.2 重要的CSS属性...