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