How to change font size h1 - h6 with button using javascript?

Question

I'm trying to change the font size by clicking on a button, going from 16px to 18px or vice versa. So with css I defined the styles from h1 to h6 in two different scales.

I know I can play with Javascript and assign the different classes I have created to the h1 and h6 tags, but I have no idea where to start. For now I only have html and css. Can any Good Samaritan help me by showing me a way to do this?

In fact, I don't even know if it's the correct way to define styles and then apply them to tags. Sorry but I'm new, I appreciate any response.

/*16px Major Third 1.250 Scale Factor*/
.main_container > h1 {
  font-size: 31.25px;
}

.main_container > h2 {
  font-size: 25px;
}

.main_container > h3 {
  font-size: 20px;
}

.main_container > h4 {
  font-size: 16px;
}

.main_container > h5 {
  font-size: 12.8px;
}

.main_container > h6 {
  font-size: 10.24px;
}

.main_container > p {
  font-size: 16px;
}

/*18px Major Third 1.250 Scale Factor*/
.main_container > h1 {
 font-size: 35.16px;
}

.main_container > h2 {
 font-size: 28.13;
}

.main_container > h3 {
  font-size: 22.5px;
}

.main_container > h4 {
 font-size: 18px;
}

.main_container > h5 {
 font-size: 14.4;
}

.main_container > h6 {
  font-size: 11.52;
}

.main_container > p {
  font-size: 18px;
}

<button class="regular">Set 16px Typography</button>
<button class="regular">Set 18px Typography</button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

Answer 1

This kind of thing is already provided for in the CSS specifications, it is the relative units. here you have to use em unit, --> all font- sizes will be relative to their parent

doc : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

sample code:

function set_font_size_big(test)
  {
  document.querySelectorAll('.main_container').forEach( el =>
    el.classList.toggle('big',test))
  }

.main_container      { font-size  : 16px;  }
.main_container.big  { font-size  : 18px;  }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size_big(false)"> normal (16px) </button>
<button onclick="set_font_size_big(true)"> big (18px) </button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

But the best would be to use a CSS variable, which saves you from having to add / remove the big class on each of your .main_container elements doc : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

and which gives you more possibilities, like here with a range type input

const
  Root            = document.documentElement
, fontSizRange    = document.querySelector('#font_size_range')
, fontSizRangeVal = document.querySelector('#font_size_range + label')
, sizelabel = 
  { 14 : 'small'
  , 16 : 'normal'
  , 18 : 'big'
  , 20 : 'biggest'
  , 22 : 'enormous'
  }  ;

function setFontSize()
  {
  fontSizRangeVal.textContent = sizelabel[ fontSizRange.value ]
  Root.style.setProperty('--mc_f_size', fontSizRange.value + 'px' )
  }

  setFontSize()  // init
fontSizRange.oninput = setFontSize
 

:Root { --mc_f_size: 16px; }

.main_container  { font-size : var(--mc_f_size); }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<input type="range" id="font_size_range" min="14" max="22" step="2" value="16"><label></label>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

---

PO comment: Last doubt, could I replace the range slider with buttons? I am trying to do this based on your example but I cannot.

function set_font_size( val )
  {
  document.documentElement.style.setProperty('--mc_f_size', val + 'px' )
  }

:Root { --mc_f_size: 16px; }

.main_container  { font-size : var(--mc_f_size); }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size(16)"> normal (16px) </button>
<button onclick="set_font_size(18)"> big (18px) </button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

Answer 2

You can add and remove classes based on your click on the buttons. I have just come up with this solution.

const btnSixteen = document.querySelector('.sixteen');
const btnEighteen = document.querySelector('.eighteen');
const mainContainer = document.querySelector('.main_container');

btnSixteen.addEventListener('click',()=>{
  mainContainer.classList.remove('eighteenBase');
  mainContainer.classList.add('sixteenBase');
});

btnEighteen.addEventListener('click',()=>{
  mainContainer.classList.remove('sixteenBase');
 mainContainer.classList.add('eighteenBase');
})

/*16px Major Third 1.250 Scale Factor*/
.main_container.sixteenBase > h1 {
  font-size: 31.25px;
}

.main_container.sixteenBase > h2 {
  font-size: 25px;
}

.main_container.sixteenBase > h3 {
  font-size: 20px;
}

.main_container.sixteenBase > h4 {
  font-size: 16px;
}

.main_container.sixteenBase > h5 {
  font-size: 12.8px;
}

.main_container.sixteenBase > h6 {
  font-size: 10.24px;
}

.main_container > p {
  font-size: 16px;
}

/*18px Major Third 1.250 Scale Factor*/
.main_container.eighteenBase > h1 {
 font-size: 35.16px;
}

.main_container.eighteenBase > h2 {
 font-size: 28.13;
}

.main_container.eighteenBase > h3 {
  font-size: 22.5px;
}

.main_container.eighteenBase > h4 {
 font-size: 18px;
}

.main_container.eighteenBase > h5 {
 font-size: 14.4;
}

.main_container.eighteenBase > h6 {
  font-size: 11.52;
}

.main_container > p {
  font-size: 18px;
}

<button class="regular sixteen">Set 16px Typography</button>
<button class="regular eighteen">Set 18px Typography</button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

Answer 3

Use :root to set the initial size as 16px. We can do further styling using rem as it is going to use relative font size. If we change the :root font size from 16 to 18 and we use rem then it will automatically update every other font size for your h1 to h6 and p tags. To change this we can use JavaScript. All we need is a click event listener attached to the buttons and pass the required font size as '18px' or '24px'.

in brief:

• define :root with initial font size
• add javascript function to change the :root font size
• use rem wherever possible in css

const root = document.querySelector(':root');

const setFontSize = (fontSize) => {
  root.style.fontSize = fontSize;
}

:root {
  font-size: 16px;
}

/* 1.250 Scale Factor*/
.main_container > h1 {
  font-size: 1.953125rem; /* (1 * 1.25^3) */
}

.main_container > h2 {
  font-size: 1.5625rem; /* (1 * 1.25^2) */
}

.main_container > h3 {
  font-size: 1.25rem; /* (1 * 1.25) */
}

.main_container > h4 {
  font-size: 1rem;
}

.main_container > h5 {
  font-size: 0.8rem; /* (1 / 1.25) */
}

.main_container > h6 {
  font-size: 0.64rem; /* (1 / 1.25^2) */
}

.main_container > p {
  font-size: 1rem;
}

<button class="regular" onclick="setFontSize('16px')">Set 16px Typography</button>
<button class="regular" onclick="setFontSize('18px')">Set 18px Typography</button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

Answer 4

as you have h1 to h6 tags defined in html, they have their own font-sizes. you don't have to add those styling in css file.

rather you can add two classes in css

.font16{ font-size: 16px }

.font18{ font-size: 16px }

and then apply those classes dynamically to the element for which you want to change font size.

eg:

const applyClassToElemets =(elements,className)=>{

elements.forEach(element=>element.classList.add(className))
}


const changeToSize18 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font18)
}

const changeToSize16 = () =>{
const allH1Elements = document.querySelectorAll("h1"); 
applyClassToElemets(allH1Elements,font16)
}

Answer 5

You can solve this as below if you don't want to use classes.

But this is not recommended. using classes is better.

Answer 6

The general approach to this is to add a class to one of your elements when the a button is clicked.

Classes

Html elements can have multiple classes. These are separated by spaces IE <div class="main_container big green> means that it has 3 classes, "main_container", "big" and "green"

Css specificity

The browsers determines which css rules to apply depending on specificity when a css rules contains multiple classes it wil gain 'Specificity' ie .main_container {..rules..} is less specific then .main_container.big {..rules..}

The rules are actually combined, any duplicate rules will be overwritten by the selector with the most specificity.

Example

in this example we combine this. There are css rules for .main_container and .main_container.big the html element start with just main_container. when we click the button, big class is added. The browser then applies the additional css rules

function setBig() {
  document.querySelector(".main_container").classList.add('big');
}

function removeBig() {
  document.querySelector(".main_container").classList.remove('big');
}

/*16px Major Third 1.250 Scale Factor*/

.main_container>h1 {
  font-size: 31.25px;
}

.main_container>h2 {
  font-size: 25px;
}

.main_container>h3 {
  font-size: 20px;
}

.main_container>h4 {
  font-size: 16px;
}

.main_container>h5 {
  font-size: 12.8px;
}

.main_container>h6 {
  font-size: 10.24px;
}

.main_container>p {
  font-size: 16px;
}


/*18px Major Third 1.250 Scale Factor*/

.main_container.big>h1 {
  font-size: 35.16px;
}

.main_container.big>h2 {
  font-size: 28.13;
}

.main_container.big>h3 {
  font-size: 22.5px;
}

.main_container.big>h4 {
  font-size: 18px;
}

.main_container.big>h5 {
  font-size: 14.4;
}

.main_container.big>h6 {
  font-size: 11.52;
}

.main_container.big>p {
  font-size: 18px;
}

<button class="regular" onClick="removeBig()">Set 16px Typography</button>
<button class="regular" onClick="setBig()">Set 18px Typography</button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>