How to Get the Font Size of an Element as It Was Set by CSS

How can I get the font size of an element as it was set by css

This jQuery plugin looks like it will do the trick:

Update: jQuery Plugin for Retaining Scalable Interfaces with Pixel-to-Em Conversion

Github: jQuery-Pixel-Em-Converter

how get current text size in css

I would seek a different and much simpler approach.

p.myText {  font-size: 16px;}
.increaseSize {  font-size: 1.5em}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

how to get current font-size for item using css

What I understand is that you want to increase all font-size by 3px all over the page. You would be able to do that in css only if you had define your font-size with em not with px. This way font are realtive to parent and you are able to twick them easily.

So now you just have the option to make the change in all you font-size value I presume. Or just change your CSS to use variables for font-size
https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Find the absolute font-size of a relative font-size

In Chrome Dev tools

F12 > Elements > Computed > font-size

A value in pixels will be displayed.

How to increase font-size of all divs of a certain class

You can use getComputedStyle to get the current font-size (as a string with a unit of measure). Then I would suggest to multiply this number with a coefficient and then append the same unit again to it. This coefficient could be 1.1 or 0.9 for a 10% increase or decrease.

Here is your HTML with that solution added:

document.querySelector("button.in").addEventListener("click", () => zoom(1.1));
document.querySelector("button.out").addEventListener("click", () => zoom(0.9));

function zoom(coeff) {
    document.querySelectorAll(".txt, summary").forEach(el => {
        let css = getComputedStyle(el).getPropertyValue("font-size");
        let size = parseFloat(css);
        let unit = css.replace(/[\d.-]*/, "");
        el.style.fontSize = size * coeff + unit;
    });
}

summary { font-size: 20pt }
.txt { font-family: monospace; white-space: pre-wrap; font-size: 14pt }
.zoombox { display: flex; padding: 8pt 0pt }

<div class="zoombox">
  <button class="btn zoom out">-</button>
  <div class="txt"> ZOOM </div>
  <button class="btn zoom in">+</button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div class="txt chords">  Em   F        D#    </div>
  <div class="txt lyrics">A song with its lyrics</div>
</details>

How to find the place where font-size for input is set?

You can use:

table input {
    font-size: 13px;
}

How To Get Font Size in HTML

Just grabbing the style.fontSize of an element may not work. If the font-size is defined by a stylesheet, this will report "" (empty string).

You should use window.getComputedStyle.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style); 
// now you have a proper float for the font size (yes, it can be a float, not just an integer)
el.style.fontSize = (fontSize + 1) + 'px';

Setting the font-size of a body tag

h1 has a default font-size set to 2em which means 2 x the font size of the parent element. Same thing with the others headings, they all have a font-size specified using em unit.

Using percentage with font-size is also relative to parent font-size and means p x the font size of the parent element where p is a value between 0 (for 0%) and 1 (for 100%).

So if you specify 100% within the body then the body will have 16px (the default font-size) and h1 will have 32px.

^{You can use the same logic to find the font-size for the other headings.}

body {
  font-size:100%;
}

<h1>this a text</h1>

---

Related Topics