整理CSSStyleSheet相关的属性

Yu_Huang 发布于2019-08-19 17:27 / 1468人阅读

摘要：是规则的索引，从开始，如果数值超出了则添加到最后，也可传入添加到最后。是一个数组，中的键值对按照规则书写。

所有代码均在Chrome下测试

获取样式表-StyleSheet

//方法一
var styleSheets = document.styleSheets; //styleSheets.length可返回样式表的个数
var styleSheet = document.styleSheets[index];
//方法二
var styleSheet = document.getElementsByTagName("link")[index].sheet;
var styleSheet = document.getElementsByTagName("style")[index].sheet;

相对应的对象类型：

styleSheets --------------------- StyleSheetList()

styleSheet ---------------------- CSSStyleSheet()

相关的属性：

//javascript获取一个样式表，及相关属性
var styleSheet = styleSheets[2];
styleSheet.ownerNode//返回link节点，或者style节点

styleSheet.deleteRule(index);
styleSheet.removeRule(index);
styleSheet.insertRule(string, index);//一次只能添加一个CSSRule
//例如
styleSheet.insertRule(".red {color: red;}", 0);//添加到第一个
styleSheet.insertRule(".red {color: red;}", styleSheet.rules.length);//添加到最后一个

获取CSS规则-CSSRule

var cssRules = styleSheet.cssRules; //cssRules.length可返回CSS规则的个数
var cssRules = styleSheet.rules;
var cssRule = cssRules[index];

相对应的对象类型：

cssRules --------------------- CSSRuleList()

cssRule ---------------------- CSSStyleRule()

相关的属性：

/*这是三个CSSRule*/
.red {
    color: red;
}
.blue {
    color: blue;
}
.yellow {
    color: yellow;
}

//javascript获取一个样式，及相关属性
var cssRule = cssRules[0];
cssRule.cssText === ".red { color: red; }"
cssRule.selectorText === ".red"

cssRule.parentRule === null
cssRule.parentStyleSheet === styleSheet

获取花括弧中的样式-{//style}

var styles = cssRule.style; //styles.length可返回花括弧中样式的个数

相对应的对象类型：

styles --------------------- CSSStyleDeclaration()

相关的属性：

/*这是一个CSSRule，里面有三个style*/
.font {
    color : red;
    font-size : 20px;
    font-weight : bold;
}

//用javascript获取花括弧中的样式，以及相关的属性
var styles = cssRule.style;
styles.cssText === "color : red;font-size : 20px;font-weight : bold;" //可修改
styles.length === 3
styles[0] === "color" //不可修改
styles[1] === "font-size" //不可修改
styles[2] === "font-weight" //不可修改
styles.color === "red" //可修改
styles.fontSize === "20px" //可修改
styles.fontWeight === "bold" //可修改

styles.parentRule === cssRule

向样式表中添加CSSRule

function addCSSRules(ssIndex, crIndex, styleSheetRules){
    var default_ssIndex = document.styleSheets.length - 1;
    ssIndex = ssIndex === "default"? default_ssIndex: ssIndex > default_ssIndex? default_ssIndex: ssIndex;
    var styleSheet = document.styleSheets[ssIndex];
    var default_crIndex = styleSheet.cssRules.length;
    crIndex = crIndex === "default"? default_crIndex: crIndex > default_crIndex? default_crIndex: crIndex;

    var i;
    for(i = 0; i < styleSheetRules.length; i++){
        var ruleText = styleSheetRules[i].selector + "{";
        for(var style in styleSheetRules[i].styles){
            ruleText += style + ":" + styleSheetRules[i].styles[style] + ";";
        }
        ruleText += "}";
        styleSheet.insertRule(ruleText, crIndex);
        crIndex++;
    }
}

ssIndex是样式表的索引，从0开始，如果数值超出了styleSheets.length - 1则取最后一个样式表，也可以传入"default"取最后一个样式表。

crIndex是CSS规则的索引，从0开始，如果数值超出了cssRules.length则添加到最后，也可传入"default"添加到最后。

styleSheetRules是一个数组，styles中的键值对按照CSS规则书写。

例如：

addCSSRules(4, "default", [
    {
        selector: ".insert",
        styles: {
            color: "silver",
            "font-size": "20px"
        }
    },
    {
        selector: "#add",
        styles: {
            width: "120px",
            "background-color": "#ff4"
        }
    }
]);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78546.html

整理CSSStyleSheet相关的属性

摘要：是规则的索引，从开始，如果数值超出了则添加到最后，也可传入添加到最后。是一个数组，中的键值对按照规则书写。所有代码均在Chrome下测试获取样式表-StyleSheet //方法一 var styleSheets = document.styleSheets; //styleSheets.length可返回样式表的个数 var styleSheet = document.style...

Joyven 2019-08-28 18:30 评论0 收藏0
可构造样式表 - 通过javascript来生成css的新方式

摘要：可构造样式表是一种使用进行创建和分发可重用样式的新方法。它甚至可以直接用于浏览器解析器直接的接口，无需将他们注入到就可以很轻易的加载样式表。构建一个样式表与引入一个新不同，可构造样式表规范使得其可以通过调用构造函数来强制创建样式表。可构造样式表是一种使用Shadow DOM进行创建和分发可重用样式的新方法。使用Javascript来创建样式表是可能的。然而，这个过程在历史上一直是使...

ConardLi 2019-08-23 15:17 评论0 收藏0
JavaScript DOM2和DOM3——“样式”的注意要点

摘要：如计算的样式方法和属性前者是增强了，这个方法接收两个参数计算样式的元素以及一个伪元素字符串如。操作表样式类型表示的是样式表，包括元素包含的样式表和在元素中定义的样式表。层次：访问style对象： style对象是CSSStyleDeclaration的实例； getComputedStyle方法也返回CSSStyleDeclaration的实例；访问样式表：元素包含的样式表...

whjin 2019-08-19 17:15 评论0 收藏0
JavaScript DOM2和DOM3——“样式”的注意要点

摘要：如计算的样式方法和属性前者是增强了，这个方法接收两个参数计算样式的元素以及一个伪元素字符串如。操作表样式类型表示的是样式表，包括元素包含的样式表和在元素中定义的样式表。层次：访问style对象： style对象是CSSStyleDeclaration的实例； getComputedStyle方法也返回CSSStyleDeclaration的实例；访问样式表：元素包含的样式表...

Jason_Geng 2019-08-28 18:28 评论0 收藏0
DOM扩展,DOM2和DOM3

摘要：扩展选择符的核心是两个方法和。目前已完全支持的浏览器有和。在写模式下，会根据指定的字符串创建新的子树，然后用这个子树完全替换调用元素。在删除带有事件处理程序或引用了其他对象子树时，就有可能导致内存占用问题。删除集合中指定位置的规则。 DOM扩展选择符API Selectors API Level 1 的核心是两个方法：querySelector()和querySelectorAll(...

suxier 2019-08-21 10:45 评论0 收藏0