CSS - font-size property

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin

1 - About

font size

Advertising

3 - Javascript

3.1 - element.style.fontSize

The inline style definition of the font-size.

If the font-size is defined by a stylesheet, the property element.style.fontSize will report the empty string.

.sheet { font-size: 15px }
<p class="sheet">A p element with the font-size defined by a stylesheet</p>
<p style="font-size: 20px">A p element with the font-size defined by a stylesheet</p>
allP = document.querySelectorAll("p");
console.log("The first p with a CSS definition has a fontSize property of "+allP.item(0).style.fontSize);
console.log("The second p with an inline definition has a fontSize property of "+allP.item(1).style.fontSize);

3.2 - calculated font-size

Window/getComputedStyle

.parent { font-size: 20px }
.medium { font-size: 0.75em }
.small { font-size: 0.5em }
<div class="parent">
    <p>Hello Nico</p>
    <p class="medium">Hello Nico</p>
    <p class="small">Hello Nico</p>
</div>
div = document.querySelector("div");
console.log("The font size of the parent div element is "+window.getComputedStyle(div).fontSize);
allP = document.querySelectorAll("p");
console.log("The font size of the first p element is "+window.getComputedStyle(allP.item(0)).fontSize);
console.log("The font size of the medium p element is "+window.getComputedStyle(allP.item(1)).fontSize);
console.log("The font size of the small p element is "+window.getComputedStyle(allP.item(2)).fontSize);

web/css/font-size.txt ยท Last modified: 2019/02/09 11:40 by gerardnico