解释 "document.styleSheets[0].cssRules[0].style;"

发布于06月19日

谁能解释一下这段代码:

document.styleSheets[0].cssRules[0].style;

如果您使用下面的代码作为示例来解释，那就很好了:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Times New Roman', Times, serif;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body{
    background-color: rgb(216, 54, 54);
}
.wrapper {
    width: 400px;
    position: absolute;
    transform: translate(50%,50%);
    bottom: 50%;
    right: 50%;
    /* animation: fadeIn 2s ease-in; */
}

我只是想了解一下代码，我是在网上找到的.

推荐答案

document是您可以从中访问样式表的document对象
document.styleSheets是一个只读属性，返回StyleSheetList.见https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets
document.styleSheets[0]从样式表列表中提取第一个样式表
document.styleSheets[0].cssRules是一个CSSRuleList只读属性，请参见https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/cssRules
document.styleSheets[0].cssRules[0]是CSSRuleList中的第一个CSSRule对象
document.styleSheets[0].cssRules[0].style是给定CSSRule对象的样式

您可以按照下面的代码片段来研究这一点:

console.log(document.styleSheets[0].cssRules[0].style);

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family:'Times New Roman', Times, serif;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body{
    background-color: rgb(216, 54, 54);
}
.wrapper {
    width: 400px;
    position: absolute;
    transform: translate(50%,50%);
    bottom: 50%;
    right: 50%;
    /* animation: fadeIn 2s ease-in; */
}