在使用样式之前从 div 添加项目到头部样式

Question

所以情况是我在脑海中设置了这样的风格：

<style>
    .img_png_1 {
        background-repeat: no-repeat;
        background-position: -20px -80px;
        width: 200px;
        height: 400px;
    }
</style>

然后我下载了一张图片作为 base64 代码，并将其放入 div:

<div id="backgroundImage">
    base 64 code will be here
</div>

此代码是通过 ajax 调用加载的。所以一旦它下来，我想把这张图片作为风格的背景。问题是尚未创建将包含背景图像的 div。如果是，我可以做类似的事情：

$(".img_png_1").css("background-image", "url('data:image/png;base64," + $("#backgroundImage").text() + "')");

将背景图像放入 div（我还没有测试过这个，因为它无论如何都不是我想要的），但这只适用于已经加载的 divs。

我想将此代码加载到样式中以供将来在创建带有 class 的 div 时使用。我用追加尝试了一些东西，但后来我只能写一个完整的样式，不能追加到一个特定的样式。

有什么想法吗？

Answer 1

好的，目前问题已经解决，虽然我不确定是否有比这更好的答案。

所以我所做的（感谢 charlietfl）是附加一个具有相同名称的额外样式：

$("head > style").append(".img_png_1 { background-image: url('data:image/png;base64," + $("#backgroundImage").text() + "'); }");

这将创建第二个同名样式，当使用 chrome 开发工具等（不是源代码）时，您会看到它包含所有代码。然后我添加了所需的 div 并按要求显示。

在使用样式之前从 div 添加项目到头部样式

Add item to style in head from a div before style is used

css

jquery

base64

background-image