How to add a font size button to my website HTML, JavaScript, & CSS?-CodePudding

I'm trying to add a button that controls the font size of my website. When I press the font button, I want all my fonts to increase in size.

I've tried using JavaScript, HTML, & CSS.

The problem I'm facing is that some of the text on my website isn't increasing in size when I press the button.

My Problem

My Code below

<!--HTML -->
<button onclick="fontsize()">FontSize</button>
  
/*CSS:*/
    body.fontsize {
      -webkit-font-smoothing: subpixel-antialiased;
      font-size: 3rem;
  }

// JavaScript: //

function fontsize() {
  // Toggling the class "fontsize" on the body
  document.body.classList.toggle("fontsize");
}

Thank you

CodePudding user response：

With the limited information provided, I'm guessing it's a style inheritance issue. The text that doesn't change size, likely has text styling from a closer ancestor. This will overwrite any styling changes you make to the body. If you inspect one of the text elements that won't upsize, you can see the styling inheritance in the Styles section of the Inspector. Any ancestor styling that has been replaced by styling done to a closer ancestor will be crossed out.

I suggest you solve this issue by setting all your font sizes in rem, and programmatically changing the font size in the <html> element style attribute (which determines how many pixels is in a rem).

const htmlEl = document.querySelector("html")

let pxPerRem = 16

function increaseFontSize() {
  pxPerRem  
  htmlEl.setAttribute("style", `font-size: ${pxPerRem}px `)
}

function decreaseFontSize() {
  pxPerRem--
  htmlEl.setAttribute("style", `font-size: ${pxPerRem}px `)
}

body {
  font-size: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.text-container {
  font-size: .8rem;
}

button {
  font-size: 1rem;
}

<body>
  
  <button onClick="increaseFontSize()"> </button>
  <button onClick="decreaseFontSize()">-</button>
  
  <h1>child</h1>

  <div >
    <h1>nested descendant</h1>
  </div>

</body>

This will update all font sizes assigned using rem and will maintain proportions as well.

CodePudding user response：

Try this...

In order to increase the font-size, you'll need to wrap everything in a container of some kind. In this case, I wrapped all your code in a main selector and then called it in JS, and applied the function to that selector.

const increment = document.getElementById("up"),
  decrement = document.getElementById("down"),
  fsize = document.querySelector("main"),
  step = 2;

fsize.style.fontSize = "30px";

increment.onclick = function() {
  fsize.style.fontSize = parseInt(fsize.style.fontSize)   step   "px";
};

decrement.onclick = function() {
  fsize.style.fontSize = parseInt(fsize.style.fontSize) - step   "px";
};

body {
  margin: 20px;
}

main h2,
main h4 {
  text-align: center;
}

.font {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

@media screen and (min-width: 400px) {
  .font {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .font {
    width: 30%;
  }
}

@media screen and (min-width: 992px) {
  .font {
    width: 20%;
  }
}

button {
  width: 30px;
  height: 30px;
}

<div >
  <div >
    <p>Change Font Size: </p>
    <button id="down">-</button>
    <button id="up"> </button>
  </div>
  <hr>
  <main>
    <h2>Hello World</h2>
    <h4>I am a subtitle</h4>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, temporibus aut! Distinctio rem, mollitia vero necessitatibus aliquid aliquam eveniet modi reiciendis quo ad illo. Ipsum quo obcaecati quidem commodi reprehenderit!</p>
    <p>Impedit rerum natus aliquam at sequi harum. Quas modi exercitationem deleniti officia commodi vitae impedit consectetur non, porro reprehenderit expedita fugiat! Nostrum aliquam laboriosam fuga architecto dignissimos impedit id iusto.</p>
    <p>Ipsa, molestiae voluptates! Assumenda placeat velit totam, rerum recusandae nobis nisi doloribus quam error labore molestias officia eos laudantium quia enim, impedit, ea tenetur beatae et nemo nostrum? Recusandae, odio.</p>
  </main>
</div>

CodePudding user response：

You can do this with a simple css toggle if you apply it to the root element (<html>) and use "rem" units to specify all of the font sizes in your html. This also preserves the relative sizes of text when it gets bigger or smaller.

(It has to be html element, not body because rem scale base on the "root" element of the document)

Run the below snippet for a demo.

function fontsize_1() {
  // Toggling the class "fontsize" on the body
  document.body.classList.toggle("fontsize");
}

function fontsize_2() {
  // Toggling the class "fontsize" on the html
  document.querySelector("html").classList.toggle("fontsize");
}

body.fontsize {
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 200%;
}

html.fontsize {
  -webkit-font-smoothing: subpixel-antialiased;
  font-size: 200%;
}

/* example sizes */
.px {
  font-size: 12px
}

.rem {
  font-size: 1rem
}

.rem-small {
  font-size: .6rem
}

.rem-big {
  font-size: 1.5rem
}

/* color the border of the active button */
body.fontsize #b1, html.fontsize #b2 {
  border-color:red;
}

<!--HTML -->
<button onclick="fontsize_1()" id="b1">FontSize, body</button>
<button onclick="fontsize_2()" id="b2">FontSize, html</button>
<table width=100%><tr>
  <td>
    <p>No font size</p>
    <p >Font size in px</p>
  </td>
  <td>
    <div >Big font size in rem</div>
    <div >Font size in rem</div>
    <div >Small font size in rem</div>
  </td>
</tr></table>

(I had to use document.querySelector("html") instead of document.html because otherwise it wouldn't work inside a stackoverflow snippet)