jquery - 如何通过javascript在浏览器Dom中创建和编辑一个css文件然后下载？

Question

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

我创建了一个按钮创建器，里面有大量的 css 规则，而且 css 文件太长了。所以，我想给用户一个选择，当用户创建一个按钮时，我想提供一个仅包含用于创建按钮的 css 规则的 css 文件。 css 文件将由 javascript 在浏览器 dom 中创建。

例如，假设我创建了一个按钮

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

等等

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

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

Answer 1

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

HTML:

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

CSS:

#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);
}

和 Javascript (JQuery):

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')
});

哦，当然还有 jsFiddle测试它...

致谢 Awesomeness01 , Brett Zamir和 marknadal