Question

我在空HTML文档中加载以下函数::

setTimeout(function() {
          (function test(){
            var elem = document.createElement('div');
            body = document.body;
            body.appendChild(elem);

            var
            rule = "lalalalallalaallllllllllllllaaaaaaaaaaaaaaa" ,
            mod = 'Alex-z',
             style = ['&#173;','<style id="s', mod, '">', rule, '</style>'].join('');
             console.log(style);
            elem.innerHTML += style;
          })();
        }, 2500);

现在我有一个问题，无论rule有多大，我都没有在浏览器中看到任何文字，为什么？有人可以解释一下，JS功能检测库中使用了一个非常相似的片段，称为modenizer，所以我真的很想知道为什么我的浏览器中没有出现任何内容？

Answer 1

因为默认情况下<style></style>隐藏在浏览器中，如果检查元素，则display:none设置为div style { display: block; }。这是因为您不希望在浏览器中显示您声明的样式吗？

我真的不知道你要做什么，但是如果你想看看你在JS上生成的样式那么使用：

Answer 2

您在浏览器中看不到任何文字，因为您的输出是：

"&#173;
<style id="sAlex-z">lalalalallalaallllllllllllllaaaaaaaaaaaaaaa</style>"

是软连字符，将转换为HTML名称，结果不可见（http://www.ascii.cl/htmlcodes.htm）
其余只是<style>元素，仅用于设置CSS规则，默认情况下设置为style { display: none; }，因此不可见。

在JS特征检测库中使用了一个非常相似的sinppet 叫Modernizr

是的，Modernizr使用这种片段来检测某些功能，因为在大多数情况下需要创建一个空元素并尝试设置我们尝试测试的属性。例如：

tests['textshadow'] = function() {
        return document.createElement('div').style.textShadow === '';
    }

innerHTML向div添加了文本，但内容仍然不可见

2 个答案: