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

JavaScript注入的内部CSS不适用

4 个答案: