Jquery 如何使用javascript在浏览器Dom中创建和编辑css文件，然后下载？

如何通过javascript在浏览器Dom中创建和编辑css文件，然后下载

我已经创建了一个按钮创建者，有很多css规则，css文件太长。所以，我想给用户一个选择，当用户做出一个按钮时，我只想给一个css文件一个用于创建按钮的css规则。css文件将通过javascript在浏览器dom中创建

例如，假设我创建了一个带有

{
    font-size: 20px;
    padding:10px 5px;
    background-color: #333;
    color: #FFF;
}

等等

现在，我想要一个只有这种样式的css文件。
我不想提供在剪贴板中复制样式的选项。
用户将获得一个css文件下载

---

我不懂任何后端语言。我正在学习前端的过程。

在这里，您可以获取给定元素的计算样式，并为用户提供将其保存在css文件中的选项。当然可以对其进行调整，但基本上就是这样：

HTML:

和Javascript（JQuery）：

哦，当然还有测试它的方法

---

学分，这会让你开始学习谢谢。但是我不知道任何后端语言您可能对这样的东西感兴趣，但是这是通过coffeescript完成的，还有这个（导出部分）为用户提供一个要保存的文件（据我所知，您可以发送任何扩展名的要保存的文件）

<button id="b" href="#">export to CSV</button>

#b {
    background: linear-gradient(to bottom right, #fff, #0af);
    border: solid 1px #0af;
    border-radius: 10px;
    color: #333;
    cursor: pointer;
    margin: 10px;
    outline: none;
}
#b:hover {
    background: linear-gradient(to bottom right, #fff, #0af, #07c);
}

b = $('#b');
function css(a) {
    var sheets = document.styleSheets,
        o = {};
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (a.is(rules[r].selectorText)) {
                o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
            }
        }
    }
    return o;
}
function css2json(css) {
    var s = {};
    if (!css) return s;
    if (css instanceof CSSStyleDeclaration) {
        for (var i in css) {
            if ((css[i]).toLowerCase) {
                s[(css[i]).toLowerCase()] = (css[css[i]]);
            }
        }
    } else if (typeof css == "string") {
        css = css.split("; ");
        for (var i in css) {
            var l = css[i].split(": ");
            s[l[0].toLowerCase()] = (l[1]);
        }
    }
    return s;
}
myCSS = objToString(css(b));
function objToString(obj) {
    var str = '{\n';
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            str += '    ' + p + ': ' + obj[p] + ';\n';
        }
    }
    str += '}';
    return str;
}
function download(text, name, type) {
    var a = document.createElement("a");
    var file = new Blob([text], {
        type: type
    });
    a.href = URL.createObjectURL(file);
    a.download = name;
    a.click();
}
b.on('click', function() {
    download(myCSS, 'test.css', 'text')
});