如何为HTML中<object>/<embed>加载的TXT文件添加样式？求替代方案

嘿，我懂你遇到的困扰了——用<object>或<embed>标签加载本地文本文件时，没法直接通过主页面的CSS给里面的内容设置样式，对吧？这是因为这两个标签会把外部文本文件渲染成一个独立的子文档环境，主页面的样式规则没法渗透进去控制里面的文本。

下面给你几个更可控的替代方案，能轻松给文本内容加样式：

方法1：用JavaScript读取文本并插入到页面元素（最推荐） #

这种方式会把文本内容直接整合到主页面的DOM结构里，完全可以用CSS自由控制样式，步骤很简单：

<style>
  /* 自定义你想要的所有样式 */
  .txt-display {
    font-size: 50px;
    font-family: Arial;
    border: 2px solid #333;
    width: 700px;
    min-height: 36px;
    padding: 2px;
  }
</style>

<!-- 用来承载文本的容器 -->
<div class="txt-display" id="txtContainer"></div>

<script>
  // 用fetch API读取文本文件
  fetch('title.txt')
    .then(response => {
      if (!response.ok) throw new Error('文本文件加载失败');
      return response.text();
    })
    .then(textContent => {
      // 将文本插入到容器中
      document.getElementById('txtContainer').textContent = textContent;
    })
    .catch(err => console.log(err.message));
</script>

这样文本内容就和页面其他元素一样，完全受你的CSS控制，字体大小、边框、颜色这些都能随便调。

方法2：用iframe+JavaScript控制样式（适合必须嵌入的场景） #

如果一定要用嵌入的方式，可以试试iframe，然后通过JS修改iframe内部的样式（注意：必须保证文本文件和主页面同源，也就是同一域名、协议、端口，不然浏览器的跨域限制会阻止修改）：

<iframe id="txtIframe" src="title.txt" width="700" height="36" frameborder="2"></iframe>

<script>
  // 等待iframe加载完成
  document.getElementById('txtIframe').onload = function() {
    // 获取iframe内部的文档对象
    const frameDoc = this.contentDocument || this.contentWindow.document;
    // 直接修改内部body的样式
    frameDoc.body.style.fontSize = '50px';
    frameDoc.body.style.fontFamily = 'Arial';
    frameDoc.body.style.margin = '0';
  };
</script>

方法3：服务器端渲染（适合有后端的项目） #

如果你的项目有后端服务（比如PHP、Node.js等），可以直接在服务器端读取文本文件的内容，然后把内容嵌入到HTML中输出，这样文本就是页面的一部分，样式自然能生效。举个PHP的例子：

<style>
  .txt-display {
    font-size: 50px;
    font-family: Arial;
    border: 2px solid #333;
    width: 700px;
    height: 36px;
  }
</style>

<div class="txt-display">
  <?php 
    // 读取文本文件内容并输出
    echo file_get_contents('title.txt'); 
  ?>
</div>

以上几种方法里，最灵活、不需要后端支持的就是方法1，推荐优先尝试~

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