I found this on the web
function largeFont() {
const dStyle = document.querySelector('style');
dStyle.innerHTML = 'p {font-size: 2rem;}';
}
But this takes everything inside of <style></style> wipes it clean and puts in "p {font-size: 2rem;}". Is it possible to change specific thing inside of <style></style> like
document.querySelector('style').body
or
document.querySelector('style').#box
document.querySelector('style').box.background-color
Or whatever. I know how to do inline, But I would rather not in this case. I mean, I guess I could just parse the whole thing and find replace that text...
If the style is inline on the page, you can insert content into it with +=, which will keep the existing content.
const dStyle = document.querySelector('style');
dStyle.innerHTML += 'p {font-size: 2rem;}';
// ^^^
If the style is not inline on the page, or you don't want to use the above approach, you can also use insertRule.
const sheet = document.querySelector('style').sheet;
sheet.insertRule(`
p {
font-size: 2rem;
}
`,
sheet.cssRules.length
);