Is there a solution for a font size slider affecting body tag but just need it to affect some css classes

user_15107450 0
Viewed 100

I have the following code to change the body font size on a web site. Its working fine but the resizing gets awful as it affects every text into de body. So I have tried to transform it to only apply the font resizing just to some css classes but I can not find the solution. What I would like to do is that the resizing just affect, for example, .content-block, .main-content, .etc,....

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<link href="app.css" rel="stylesheet">
</head>

<body>
<div class="font-slider">
<input type="range" min="17" max="28" value="22" step="1"/>
</div>
<div>
<h1>Changing Font Size</h2>
<p>I am just a boring text, existing here solely for the purpose of this demo</p>
<p>And I am just another one like the one above me, because two is better than having only one</p>
<a href="#">I am a link, don't click me!</a>
</div>
<script>

var curSize = localStorage.getItem("saveSize");
var slider = document.querySelector('.font-slider input[type="range"]')
var body = document.body

if (curSize) {
var saveSize = curSize;
body.style.fontSize = saveSize + 'px';
}

slider.addEventListener("input", function (e) {
var newSize = this.value,
    defaultSize = body.style.getPropertyValue('font-size'),
    minSize = 17,
    maxSize = 28;

if (newSize <= maxSize && newSize >= minSize) {
    body.style.fontSize = newSize + 'px';

    localStorage.setItem("saveSize", newSize);
}
});
</script>
</body>
</html>
html javascript
2 Answers

You can use css variable in needed classes and in javascript simply change value of that variable:

var curSize = null; // localStorage.getItem("saveSize");
var slider = document.querySelector('.font-slider input[type="range"]')
var body = document.body
var defaultSize = body.style.getPropertyValue('font-size');

if (curSize) {
  var saveSize = curSize;
  document.documentElement.style.setProperty("--font-size", saveSize + "px");
  //body.style.fontSize = saveSize + 'px';
}

slider.addEventListener("input", function(e) {
  var newSize = this.value,
    minSize = 17,
    maxSize = 28;

  if (newSize <= maxSize && newSize >= minSize) {
    document.documentElement.style.setProperty("--font-size", newSize + "px");
    //    body.style.fontSize = newSize + 'px';
    //    localStorage.setItem("saveSize", newSize);
  }
});
:root {
  --font-size: 1em;
}

.affected,
.dynamic {
  font-size: var(--font-size);
}


/* ignore this */

.affected:before,
.dynamic:before,
.content :not(.affected):not(.dynamic):before {
  content: "dynamic font size:";
  background-color: lightgreen;
  border: 1px solid grey;
  font-size: initial;
  margin: 1em;
  padding: 0.2em;
}

.content :not(.affected):not(.dynamic):before {
  content: "static font size:";
  background-color: pink;
}
<div class="font-slider">
  <input type="range" min="17" max="28" value="22" step="1" />
</div>
<div>
  <div class="content">
    <h1>Changing Font Size</h2>
      <p class="dynamic">I am just a boring text, existing here solely for the purpose of this demo</p>
      <p>And I am just another one like the one above me, because two is better than having only one</p>
      <a href="#" class="affected">I am a link, don't click me!</a>
  </div>
</div>

user_29300380

The Vanowm answer is ok and works very well but I need the localStorage to store the selected font size to persist over sessions, so I am going to post an answer with that enabled just in case someone else could need a similar approach.

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<link href="app.css" rel="stylesheet">
</head>

<body>
<div class="font-slider">
<input type="range" min="17" max="28" value="22" step="1"/>
</div>
<div>
<h1>Changing Font Size</h2>
<p class="dynamic">I am just a boring text, existing here solely for the purpose of this demo</p>
<p class="affected">And I am just another one like the one above me, because two is better than having only one</p>
<a href="#">I am a link, don't click me!</a>
</div>
<script>

var curSize = localStorage.getItem("saveSize");
var slider = document.querySelector('.font-slider input[type="range"]')
var body = document.body
var defaultSize = body.style.getPropertyValue('font-size');

if (curSize) {
var saveSize = curSize;
document.documentElement.style.setProperty("--font-size", saveSize + "px");
// body.style.fontSize = saveSize + 'px';
}

slider.addEventListener("input", function(e) {
var newSize = this.value,
    minSize = 17,
    maxSize = 28;

if (newSize <= maxSize && newSize >= minSize) {
    document.documentElement.style.setProperty("--font-size", newSize + "px");
// body.style.fontSize = newSize + 'px';
    localStorage.setItem("saveSize", newSize);
}
});
</script>
</body>
</html>
user_151074500
Related