Как увеличить шрифт по всему сайт по клику на кнопки?

Question

.item.level-1 {
  font-size: 11px;
}

.item.level-2 {
  font-size: 14px;
}

.item.level-3 {
  font-size: 16px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

SCHRIFT

<div class="wrap">
  <button class="item level-1">A</button>
  <button class="item level-2">A</button>
  <button class="item level-3">A</button>
</div>

<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

Answer 1

Меняет шрифт только тексту, который лежит в теге < p >

let level_1 = document.querySelector('.item.level-1');
let level_2 = document.querySelector('.item.level-2');
let level_3 = document.querySelector('.item.level-3');
let texts   = document.querySelectorAll('p');

level_1.onclick = function(){
for(let elem of texts){ 
elem.style.fontSize = "11px";   
}       
}

level_2.onclick = function (){
for(let elem of texts){ 
elem.style.fontSize = "14px";   
}       
}

level_3.onclick = function (){
for(let elem of texts){ 
elem.style.fontSize = "16px";   
}       
}

.item.level-1 {
  font-size: 11px;
}

.item.level-2 {
  font-size: 14px;
}

.item.level-3 {
  font-size: 16px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

<div class="wrap">
  <button class="item level-1">A</button>
  <button class="item level-2">A</button>
  <button class="item level-3">A</button>
</div>
<div class ="texts">
<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumq

Если нужно, чтобы весь текст на сайте менял свой шрифт.

let level_1 = document.querySelector('.item.level-1');
let level_2 = document.querySelector('.item.level-2');
let level_3 = document.querySelector('.item.level-3');
let texts   = document.querySelector('.main');
let heading = document.querySelectorAll('h3');

level_1.onclick = function(){
for(let elem of heading){
elem.style.fontSize = '11px';   
}
texts.style.fontSize = '11px';
}

level_2.onclick = function(){
for(let elem of heading){
elem.style.fontSize = '14px';   
}
texts.style.fontSize = '14px';
}

level_3.onclick = function(){
for(let elem of heading){
elem.style.fontSize = '16px';   
}
texts.style.fontSize = '16px';
}

body{
font-size:16px;     
}

.item.level-1 {
font-size: 11px;
}

.item.level-2 {
font-size: 14px;
}

.item.level-3 {
font-size: 16px;
}

h3 {
font-size: 20px;
}

<div class="main">
<div class="wrap">
  <button class="item level-1">A</button>
  <button class="item level-2">A</button>
  <button class="item level-3">A</button>
</div>

<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>
</div>

Answer 2

Не знаю то ли вы имели ввиду, но как я понял, то как-то так

let btns = [...document.querySelectorAll('.item')];
let content = document.querySelector('.content');
btns.forEach((btn) => {
  btn.addEventListener('click' , (e)=>{
    removeClasses();
    e.target.classList.contains('level-1') ? content.classList.add('level-1') : null;
    e.target.classList.contains('level-2') ? content.classList.add('level-2') : null;
    e.target.classList.contains('level-3') ? content.classList.add('level-3') : null;
    })
 
})

function removeClasses(){
  content.classList.remove('level-1' , 'level-2' , 'level-3');
}

.content.level-1 , .content .level-1 {
  font-size: 11px;
}

.content.level-2 , .content .level-2{
  font-size: 14px;
}

.content.level-3 , .content .level-3 {
  font-size: 16px;
}

SCHRIFT
<div class = 'content'>

<div class="wrap">
  <button class="item level-1">A</button>
  <button class="item level-2">A</button>
  <button class="item level-3">A</button>
</div>

<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>
</div>

Answer 3

document.querySelector('.wrap').addEventListener('click', e => {
  if (e.target.tagName == 'BUTTON') {
     document.body.style.fontSize = `${e.target.dataset.font}rem`;  
  }
})

body {
  font-size: 1rem;
}

h3 {
  font-size: 1.3em;
}

p {
  font-size: 1.2em;
}

<div class="wrap">
  <button data-font='0.7' class="level-1">Small</button>
  <button data-font='1' class="level-2">Normal</button>
  <button data-font='1.3' class="level-3">Large</button>
</div>

<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

Answer 4

Чтобы легко и просто менять размер шрифтов сразу по всему сайту, нужно установить их не в абсолютных единицах (px), а в относительных. Например, в rem — т.е. относительно размера шрифта корневого элемента.

После этого достаточно менять размер лишь в одном месте:

document.querySelector('.level-1').addEventListener( "click" , () => document.documentElement.style.fontSize  = '14px');
document.querySelector('.level-2').addEventListener( "click" , () => document.documentElement.style.fontSize  = '16px');
document.querySelector('.level-3').addEventListener( "click" , () => document.documentElement.style.fontSize  = '18px');

:root {
  font-size: 16px;
}

.item.level-1 {
  font-size: 0.6885rem /* 11px */;
}

.item.level-2 {
  font-size: 0.875rem /* 14px */
}

.item.level-3 {
  font-size: 1rem /* 16px */
}

h3 {
  font-size: 1.25rem /* 20px */
}

p {
  font-size: 1.125rem /* 18px */
}

<div class="wrap">
  <button class="item level-1">A</button>
  <button class="item level-2">A</button>
  <button class="item level-3">A</button>
</div>

<h3>level 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

<h3>level 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni unde iste officia molestiae. Ab veniam animi, quaerat, aperiam cumque labore vel nobis atque eveniet aliquid earum numquam ducimus et obcaecati.</p>

БЛОГ НА HUSL

Как увеличить шрифт по всему сайт по клику на кнопки?

Ответы (4 шт):