如何使用javascript居中和放大文本？答案

【问题标题】：How to center and enlarge text using javascript?如何使用javascript居中和放大文本？
【发布时间】：2021-11-23 19:00:22
【问题描述】：

我想用下面的代码所做的随机文本引用（我正在编写 Chrome 网络扩展程序）替换 div 内容；但我不知道如何使用 javascript 来操作文本，以便我可以将其居中、放大文本、将文本向下移动几行等。因为我无法访问原始 HTML（这是为了Chrome 扩展），我需要用 javascript 来完成这个。这可能吗？

const quotes = [
'Quotation 0.',
'Quotation 1.',
'Quotation 2.'
];
index = Math.floor(Math.random() * quotes.length);
document.getElementById('pageContent').outerHTML = quotes[index];

【问题讨论】：

标签： javascript text getelementbyid

【解决方案1】：

js不会导致文本的渲染，浏览器会解析html和css来渲染文本。您可以使用 js 注入 html 和 css 以获得所需的效果。如果不能直接编辑 html 或 css 文档，可以使用内联样式来创建视觉效果，但是 chrome 扩展确实具有注入 css 和 js 的能力。

如何修改您提供的代码：

const quotes = [
  'Quotation 0.',
  'Quotation 1.',
  'Quotation 2.'
];
const index = Math.floor(Math.random() * quotes.length);
const h2 = document.createElement("h2");
h2.style.cssText = `
  text-align: center;
  font-size: 3rem;
  margin: 1rem;
`;
h2.innerText = quotes[index];

document.getElementById('pageContent').appendChild(h2);

【讨论】：

对于以 h2.style.cssText 开头的代码行，我从 Chrom（在开发人员模式下用于测试扩展）收到“无效或意外令牌”错误
@Jago，我刚刚再次测试，没有错误。您使用什么方法注入脚本？如果你有 github 存储库，我不介意提出拉取请求
这修复了它（看起来我只需要使用双引号而不是单引号）： h2.style.cssText = "text-align: center;font-size: 3rem;margin: 1rem; ";
另外，因为我想摆脱 pageContent，所以我查找了 appendChild 并发现了 replaceWith()，它非常适合您的代码！谢谢！
啊，我明白了，问题是您没有使用template literal，它允许多行字符串之类的语法。它们是` 反引号而不是引号或撇号?

【解决方案2】：

这确实是一个层叠样式表 (CSS) 问题。

你可以使用 CSS 的

text-align: "center"
font-size: "130%"

我还建议您查看字体大小可以有哪些其他设置（相对于百分比）。如果您可以在 CSS 样式表上应用这些样式，那就更好了。但是如果你想用 JavaScript 来做，你可以做

myElement.style.textAlign = "center";
myElement.style.fontSize = "130%"

【讨论】：