如何将文本文件中的值传入HTML段落并实现CSS格式化？

你的问题核心是脚本执行时机早于目标DOM元素的加载，导致document.querySelector("#pageText")获取不到元素（返回null），无法设置内容。

解决方法 #

方法1：将脚本移到目标元素之后 #

把<script>代码块放到<p id="pageText"></p>的后面，让浏览器先解析出段落元素，再执行脚本：

</head>
<body>
    <h1>Wallboard</h1>

<script src=output.txt></script>
<p id="pageText"></p>
<script>
let pageText = text;
console.log(pageText)

let myParagraph = document.querySelector("#pageText");
console.log(myParagraph)

myParagraph.innerHTML = pageText;
</script>
</body>
</html>

方法2：监听DOM加载完成事件 #

如果不想调整脚本位置，可以用DOMContentLoaded事件，等页面所有DOM元素加载完成后再执行操作：

</head>
<body>
    <h1>Wallboard</h1>

<script src=output.txt></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let pageText = text;
    console.log(pageText)

    let myParagraph = document.querySelector("#pageText");
    console.log(myParagraph)

    myParagraph.innerHTML = pageText;
});
</script>
<p id="pageText"></p>

</body>
</html>

CSS格式化 #

只要内容成功插入到#pageText段落中，就可以直接通过CSS样式控制它的外观，比如：

#pageText {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
    margin: 20px 0;
    padding: 10px;
    border: 1px solid #eee;
}

内容的提问来源于stack exchange，提问作者TheIronKing