JavaScript注入的内部CSS不适用

Question

我使用JavaScript在网页中添加了一个div ，并与该div一起添加了一些CSS代码，因此代码如下所示

   <script>
var rand= randomString();
    var html = '<div class="'+rand+'">Welcome to StackOverflow!</div>
    <style>.'+rand+'{color:red}</style>';

    document.getElementById("parent_div").innerHTML = html;

function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 18;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    return  randomstring;
}
    </script>

这在大多数情况下都有效，并且由于某种原因该CSS不适用于此div ，但是CSS与HTML一起注入。 我还更改了顺序，先添加CSS，然后添加HTML，但没有运气，尽管大多数情况下相同的代码都能工作，但失败几次。

Answer 1

如果CSS不在head ，则不会应用CSS，除非它使用了scoped属性，并且style标签位于将被应用到的元素内。

这应该为您工作：

<script>
var html = '<div class="rule"><style scoped>.rule{color:red}</style>Welcome to StackOverflow!</div>';

document.getElementById("parent_div").innerHTML = html;
</script>

如果您想了解有关其工作原理的更多信息，请阅读以下文章： http : //html5doctor.com/the-scoped-attribute/

Answer 2

不要像这样添加样式表，请尝试以下操作：

document.styleSheets[0].addRule('.rule','color: red;');
var html = '<div class="rule">Welcome to StackOverflow!</div>';
document.getElementById("parent_div").innerHTML(html);

Answer 3

document.getElementById("parent_div").innerHTML = html

您需要以这种方式设置css。

检查此https://jsfiddle.net/3xs1bsrp/1/

Answer 4

我在程序中发现了错误，我在class使用了随机字符串生成器，当随机字符串的第一个字符为数字时，以字符开头的代码失败了

.3as324sdfsr4 => faield

.wer6sdf74hjg => worked

所以我在返回字符串前面添加了一个字符来解决这个问题

function randomString() {
    var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
    var string_length = 18;
    var randomstring = '';
    for (var i=0; i<string_length; i++) {
        var rnum = Math.floor(Math.random() * chars.length);
        randomstring += chars.substring(rnum,rnum+1);
    }
    return  's'+randomstring;
}