0

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

4 ответа 4

2

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>

2
  • Вот это чудеса, сразу видно мастера =) 12 окт 2021 в 18:10
  • спасибо, а html стоит задать font-size в пикселях?
    – testcoder
    15 окт 2021 в 11:56
0

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

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>

3
  • спасибо, но нюанс в том, что нужно на всем сайте такое сделать. Есть вариант, где понадобиться меньше кода? или нет?
    – testcoder
    12 окт 2021 в 13:13
  • этот код привязан к кнопкам, а не к количеству контента, так что размер контента не повлияет на величину текущего кода
    – Alexandr
    12 окт 2021 в 14:18
  • чтоб было понятнее, как это работает: вы нажимаете на кнопку, родительскому элементу в корне сайта добавляется класс, и в зависимости от этого класса применяется font-size всем дочерним элементам
    – Alexandr
    12 окт 2021 в 14:21
0

Меняет шрифт только тексту, который лежит в теге < 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>

3
  • спасибо, но нюанс в том, что нужно на всем сайте такое сделать. Есть вариант, где понадобиться меньше кода? или нет?
    – testcoder
    12 окт 2021 в 13:13
  • К сожалению, нет =( Коротких кодов на чистом js не бывает. 12 окт 2021 в 13:49
  • Количество текста на сайте не влияет на размер данного JS кода =) Чтобы код работал правильно, в html разметке нужно весь текст, который мы хотим увеличить заключить в тег <p></p> 12 окт 2021 в 14:44
0

Чтобы легко и просто менять размер шрифтов сразу по всему сайту, нужно установить их не в абсолютных единицах (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>

2
  • спасибо, но можно как -то обойтись без js в разметке?
    – testcoder
    15 окт 2021 в 11:45
  • @testcoder можно, конечно, вынести добавление "прослушки" кликов по кнопкам из разметки в блок js. Поправил. 15 окт 2021 в 15:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.