html如何动态添加样式表,JavaScript动态插⼊CSS的⽅法写组件时有时想把⼀些组件特性相关的 CSS 样式封装在 JS ⾥，这样更内聚，改起来⽅便。JS 动态插⼊ CSS 两个步骤：创建1、⼀个style 对象
2、使⽤ stylesheet 的 insertRule 或 addRule ⽅法添加样式
⼀、查看样式表
先看下 document.styleSheets，随意打开⼀个页⾯
其中前三个是通过 link 标签引⼊的 CSS ⽂件，第四个是通过 style 标签内联在页⾯⾥的 CSS。有如下属性
每⼀个 cssRule ⼜有如下属性
其中的 cssText 正是写在 style 的源码。
⼆、动态插⼊ CSS⾸先，需要创建⼀个 style 对象，返回其 stylesheet 对象
/*
* 创建⼀个 style， 返回其 stylesheet 对象
* 注意：IE6/7/8中使⽤ style.stylesheet，其它浏览器 style.sheet
*/
function createStyleSheet() {
var head = document.head || ElementsByTagName('head')[0];
var style = ateElement('style');
head.appendChild(style);
return style.sheet ||style.styleSheet;
}
添加函数 addCssRule 如下
/*
* 动态添加 CSS 样式
* @param selector {string} 选择器
* @param rules {string} CSS样式规则
* @param index {number} 插⼊规则的位置, 靠后的规则会覆盖靠前的
*/
function addCssRule(selector, rules, index) {
index = index || 0;
if (sheet.insertRule) {
sheet.insertRule(selector + "{" + rules + "}", index);
} else if (sheet.addRule) {
sheet.addRule(selector, rules, index);
}
}
需要注意，标准浏览器⽀持 insertRule， IE低版本则⽀持 addRule。
完整代码如下
/*
* 动态添加 CSS 样式
* @param selector {string} 选择器
* @param rules {string} CSS样式规则
* @param index {number} 插⼊规则的位置, 靠后的规则会覆盖靠前的
javascript动态效果*/
var addCssRule = function() {
// 创建⼀个 style， 返回其 stylesheet 对象
/
/ 注意：IE6/7/8中使⽤ style.stylesheet，其它浏览器 style.sheet
function createStyleSheet() {
var head = document.head || ElementsByTagName('head')[0]; var style = ateElement('style');
head.appendChild(style);
return style.sheet ||style.styleSheet;
}
// 创建 stylesheet 对象
var sheet = createStyleSheet();
// 返回接⼝函数
return function(selector, rules, index) {
index = index || 0;
if (sheet.insertRule) {
sheet.insertRule(selector + "{" + rules + "}", index);
} else if (sheet.addRule) {
sheet.addRule(selector, rules, index);
}
}
}();
如果只⽀持移动端或现代浏览器，可以去掉低版本IE判断的代码
/*
* 动态添加 CSS 样式
* @param selector {string} 选择器
* @param rules {string} CSS样式规则
* @param index {number} 插⼊规则的位置, 靠后的规则会覆盖靠前的，默认在后⾯插⼊*/
var addCssRule = function() {
// 创建⼀个 style， 返回其 stylesheet 对象
function createStyleSheet() {
var style = ateElement('style');
document.head.appendChild(style);
return style.sheet;
}
/
/ 创建 stylesheet 对象
var sheet = createStyleSheet();
// 返回接⼝函数
return function(selector, rules, index) {
index = index || 0;
sheet.insertRule(selector + "{" + rules + "}", index);
}
}();
以上就是JavaScript动态插⼊CSS的⽅法，希望对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。