如何将元素 css 转换为 JSON？ [复制]答案

【问题标题】：How to convert an element css to JSON? [duplicate]如何将元素 css 转换为 JSON？ [复制]
【发布时间】：2014-05-21 10:58:20
【问题描述】：

我让我的用户在打印之前更改页面中每个元素的任何属性（位置、颜色和...）。

我正在寻找一种用户可以存储新样式表并在以后随时恢复它的方法？

我尝试解析element.style，但它没有返回数组！同样$(element).css() 没有任何参数也不起作用！

【问题讨论】：

样品？转换此页面的文档！
没有。你想怎么存储呢？哪种结构？样式属性呢？谁赢？内联样式或属性？你的问题不够清楚
我在问题中说的！我想要 JSON 格式的:)
我有那么不清楚吗？ :-) -- 您的文档是否包含每个元素的唯一 ID？或者它也有没有id的课程？如果是这样，您希望如何存储它？ '
没有一个是必需的！我可以使用 jQuery attr 函数访问它们！我只想存储对 css 文件加载样式的更改！ :)

标签： javascript jquery html css json

【解决方案1】：

如果您可以在任务中使用插件，请尝试使用此插件：https://github.com/reworkcss/css-parse

演示：http://bililite.com/blog/blogfiles/cssparser/cssparsertest.php

示例： CSS：

body {background: #eee;color: #888;}

输出：

{
    "type": "stylesheet",
        "stylesheet": {
        "rules": [{
            "type": "rule",
                "selectors": [
                "body"],
                "declarations": [{
                "type": "declaration",
                    "property": "background",
                    "value": "#eee"
            }, {
                "type": "declaration",
                    "property": "color",
                    "value": "#888"
            }]
        }]
    }
}

【讨论】：

【解决方案2】：

感谢 Johan，我找到了正确答案！我只需要解析

window.getComputedStyle(element);

tnx 大家:)

【讨论】：

【解决方案3】：

您可以为整个页面使用唯一的样式类和单个样式表（将其添加到头部，记住元素或给它一个唯一的 ID），而不是为每个元素分配自定义样式，其中包含您的自定义样式。

然后您可以通过 stylesheet.cssRules 枚举样式表并构建您的自定义 json

【讨论】：