能够把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插入样式的方法主要分为两种：一种是通过创建`<style>`标签动态插入内联样式，另一种是通过创建`<link>`标签引入外部样式文件。这两种方法在不同的场景下各有优势，下面将详细介绍。 ### 一、JavaScript...
JavaScript插入样式是前端开发中常见的技术，用于动态改变或扩展页面的样式表现。主要有两种方法：引入外部样式和使用`<style>`标签插入内联样式。 1. 引入外部样式： 这种方法通过在`<head>`部分创建`<link>`标签...
一、用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。 但有些...
使用JavaScript，我们可以动态创建这些元素并插入到文档中。例如： ```javascript // 创建一个新的表格 var table = document.createElement('table'); // 创建一行 var row = document.createElement('tr'); // ...
通过选择元素、创建新元素、插入或删除元素，开发者可以实现动态更新网页，如实时显示数据或者响应用户操作。 案例三：AJAX AJAX允许在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。这对于创建流畅...
JavaScript动态生成CSS是一种常见的前端开发技术，它允许我们在运行时创建、修改或删除CSS样式，以实现更加灵活和动态的页面样式控制。这种方式通常用于响应式设计、动画效果、主题切换或者在某些特定条件下需要调整...
在本文中，我们将深入探讨如何使用 JavaScript 动态修改 CSS 样式表，从而实现对网页外观的实时更新。 首先，我们需要理解 CSS 样式表是如何工作的。CSS（Cascading Style Sheets）用于定义 HTML 或 XML（包括如 ...
3. JavaScript动态添加CSS样式表文件 4. 纯CSS+JS写的一个简洁的tab标签页带样式 5. JavaScript转变HTML元素的样式转变 6. CSS及元素属性JavaScript修改CSS样式style 7. 动态转变元素样式JS掌握CSS样式的方法 8. ...
JavaScript动态树型菜单是一种常见的网页交互元素，常用于展示层级结构的数据，如网站导航、文件目录或组织架构等。在Web开发中，这种菜单能够帮助用户以直观的方式探索多级内容，通过点击加减号（或者其他图标）...
在IT行业中，JavaScript和CSS是构建网页动态效果和布局的关键技术。"js动态条目添加"这个主题聚焦于如何利用JavaScript来实现网页内容的动态添加，而CSS则扮演着为这些动态元素提供美观架构的角色。这里我们将深入...
总之，JavaScript创建新样式表和新样式规则可以提高网页的响应性和性能，尤其是在响应式设计和动态内容加载的场景中。但要注意合理使用，避免过度操作导致页面性能下降。正确理解和使用这些技术，能够帮助开发者更...
至于“日历”功能，JavaScript库如jQuery UI或FullCalendar可以提供现成的日历组件，通过调用这些库的API，开发者可以轻松地在页面上插入一个交互式日历，供用户选择日期。日历不仅可以用于输入日期，还可以与表格中...
5. **表格操作**：在JavaScript中，可以动态地创建、修改和操作表格，比如插入、删除行或列，改变单元格内容，甚至实现表格排序和过滤功能。 6. 边框特效：通过JavaScript可以实现动态边框，如闪烁、滑动或渐变效果...
JavaScript动态时钟是一种常见的网页交互元素，用于实时显示当前时间，增强用户界面的活力与互动性。本主题将深入探讨如何使用JavaScript实现一个动态更新的时钟，包括基础概念、核心代码以及相关知识点。 首先，...
JavaScript 被设计用来向 HTML 页面添加交互行为，通过在 HTML 中插入 JavaScript 代码，可以实现页面元素的动态操作和用户交互。 2. JavaScript 与 Java 的区别 尽管名字相似，但 JavaScript 和 Java 是两种不同...
在网页开发中，JavaScript是一种非常重要的脚本语言，它使得网页具有交互性和动态性。本教程将深入探讨如何使用JavaScript创建动态的表格实例，包括表格的动态增删行功能以及鼠标移动时单元格变色和奇偶行颜色变化的...
在JavaScript中，动态添加table是一种常见的任务，尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述： 1. **HTML表格基础** 在...
这种方式适用于可以直接通过属性名访问的样式属性，但对于CSS类名，JavaScript不支持直接赋值，仍需使用`setAttribute()`方法。 总结来说，JavaScript动态创建和操作表格的核心在于理解`insertRow()`、`insertCell...