Question

我发布这个问题，我的回答是，帮助可能有这个问题的其他人，看看其他人是否同意我的解决方案。

想象一下，我有以下HTML文档：

<head>
    <style>
        .class1 {
            background-color: white;
            border: "1px dashed black;
        }
        .class2 {
            background-color: dodgerblue;
            border: "1px dashed orange;
        }
    </style>
</head>

现在我想获得以下javascript对象：

{
    .class1: "background-color: white; border: 1px dashed black;",
    .class2: "background-color: dodgerblue; border: 1px dashed orange;"
}

Answer 1

<script>
    var myObject = {};
    var myCss = window.document.styleSheets[0].cssRules;
    for (var counter = 0; counter < myCss.length; counter++) {
        var thisSelector = myCss[counter].selectorText;
        var thisCss = myCss[counter].style.cssText;
        myObject[thisSelector] = thisCss;
    }
</script>

受John Doherty的启发link

是否可以将css样式标记转换为javascript对象？

1 个答案: