为什么此 HTML 代码无法显示颜色字段

下面的HTML（加上JavaScript加CSS样式表）应该显示一个文本，所有"a"都被黄色字段替换。我知道这是一个非常n00b'y的问题，但我无法弄清楚为什么它无法完成这项任务。

<!DOCTYPE html>
<html>
<head>
<style>
span {
    display: inline-block;
}
span.a {background-color: yellow
}
</style>
<script>
var lipsum = document.getElementsByTagName("div")
[0].innerHTML;
lipsum = lipsum.replace( /a/gi, "###a###" );

lipsum = lipsum.replace( /###a###/gi, "<span 
class='a'>&ensp;</span>" );

document.getElementsByTagName("div")[0].innerHTML = 
lipsum;
</script>

</head>
<body>
<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit</div>
</body>
</html>

您的脚本甚至在加载 HTMLdiv 之前就正在运行。您需要将代码放在文档就绪事件处理程序中，或将其放在元素下方。页面是按顺序运行的，因此您无法在元素到达之前在元素上运行 JS，因为它尚不存在。

在 css 中，在背景色后添加（ ; <</p>

div class="one_answers">

似乎对我有用？

尝试运行下面的代码。您的代码似乎有效？

var lipsum = document.getElementsByTagName("div")[0].innerHTML;
lipsum = lipsum.replace(/a/gi, "###a###");
lipsum = lipsum.replace(/###a###/gi, "<span class='a'>&ensp;</span>");
document.getElementsByTagName("div")[0].innerHTML = lipsum;

span {
  display: inline-block;
}
span.a {
  background-color: yellow
}

<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit</div>

您可能希望将 onload 事件添加到正文以触发脚本。因为即使您的文档尚未呈现，脚本仍在运行。

<body onload="init()">
    <div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci velit</div>
</body>
<script>
    function init() {
        var lipsum = document.getElementsByTagName("div")[0].innerHTML;
        lipsum = lipsum.replace( /a/gi, "###a###" );
        lipsum = lipsum.replace( /###a###/gi, "<span class='a'>&ensp;</span>" );
        document.getElementsByTagName("div")[0].innerHTML = lipsum;
    }
</script>

相关内容

最新更新

热门标签：