How to center and enlarge text using javascript?

Question

I want to replace div content with a random text quotation (I am coding a Chrome web extension) which the code below does; but I don't know how to use javascript to manipulate the text so that I can center it, enlarge the text, bump the text down a few lines, etc. As I do not have access to the original HTML (this is for a Chrome Extension), I need to accomplish this with javascript. Is this possible?

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

async await async await · Accepted Answer · 2021-11-23T19:06:36

js does not cause the rendering of text, the browser interprets the html and css to render the text. You can use js to inject html and css for you desired effect. If you can not directly edit the html or css document, you can use inline stylings to create visual effects, however chrome extension do have the ability to inject css as well as js.

How about something like modification to the code you provided:

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);

How to center and enlarge text using javascript?

2 Answers