object标签不渲染文本，仅作容器；样式须在同源HTML资源内定义或通过JS注入contentDocument，跨域或PDF/SVG等外部资源无法CSS控制。
object 标签本身不直接渲染文本内容，它只是容器——真正显示的内容来自 data 指向的外部资源（如 HTML 文件、PDF、SVG 等）。你不能用 CSS 选择器直接给 object 里的文字加样式，就像不能给 iframe 里跨域页面的 p 元素写 #my-object p { color: red; } 一样。
所以问题本质不是“怎么改 object 的样式”，而是：你想样式化的那段文本，是否在你可控范围内？
object 加载的是同源 HTML 文件（如 ../layout/popup_error.html）
这是唯一能真正修改内部文本样式的场景。前提是：
-
data指向的是你自己的 HTML 片段（同源、无 CORS 限制） - 该 HTML 文件内容可编辑，或你能在加载后通过 JS 注入样式
常见错误现象：object 加载后，里面的 <p> 文字还是浏览器默认样式，CSS 没生效。
立即学习“前端免费学习笔记（深入）”；
原因和做法：
-
object嵌入的 HTML 是独立文档上下文，父页面的 CSS 不会穿透进去 - 必须把样式写进那个被加载的 HTML 文件里（比如
popup_error.html的<head>中加<style>），或用 JS 动态注入 - 如果要用 JS 修改，得等
load事件触发后，再访问其contentDocument
示例（安全前提：同源）：
const obj = document.querySelector('object');
obj.addEventListener('load', () => {
const doc = obj.contentDocument || obj.contentWindow?.document;
if (doc) {
const style = doc.createElement('style');
style.textContent = 'p { font-family: "Segoe UI", sans-serif; font-size: 14px; color: #333; }';
doc.head.appendChild(style);
}
});
⚠️ 注意：obj.contentDocument 在跨域时为 null，且部分浏览器（如 Safari）对 sandboxed object 限制更严。
object 加载的是 PDF / SVG / 外部资源
完全无法用 CSS 修改其内部文本样式。
原因：
- PDF 是二进制格式，浏览器只提供渲染视图，不暴露 DOM
- SVG 如果是内联（非
object加载），可用 CSS；但一旦走object data="xxx.svg"，就变成独立上下文，父页面样式无效 - 没有
contentDocument可操作，JS 也读不到内部结构
可行替代方案：
- PDF：改用
<embed>或第三方库（如 pdf.js）渲染，并自定义 UI 层覆盖样式 - SVG：放弃
object，改用<img src="x.svg">（不可样式化）或直接内联 SVG 代码（可样式化）
想统一控制所有 object 内容的字体/大小，有没有捷径？
没有通用捷径。CSS 的 font-family 和 font-size 不继承到 object 子文档。
但你可以：
- 对每个被加载的 HTML 模板，统一加一套基础样式（推荐）
- 用构建工具（如 Vite 插件、Webpack loader）自动注入
<style>到目标 HTML 文件中 - 避免用
object加载纯文本内容——改用innerHTML或fetch()+insertAdjacentHTML，这样样式完全可控
最后提醒一个易忽略点：即使同源，某些浏览器（特别是新版 Chrome）会对 object 启用更严格的 sandbox 行为，导致 contentDocument 访问失败。真要动态改样式，优先考虑不用 object。
