• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

164
Views
change In document style.. without replacing it

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...

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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
);
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error