Interactive online courses HTML Academy
2026-03-09 10:45 Diff
https://htmlacademy.org/courses/javascript-basics/dynamic-element-styles/set-font-size

We learned how to obtain the value from the field with the slider and output it to the page. But the font size in the article has not changed yet. To fix this, take the obtained value and write it to the article styles. To do this, use the style property.

In CSS the font-size property is responsible for the font size. You cannot use hyphens in property names in JavaScript. Instead, you should use CamelCase to designate the boundaries of words. For example:

CSSJavaScriptfont-sizefontSizebackground-colorbackgroundColorborder-left-widthborderLeftWidth

It turns out that in order to change the font size we need to assign a new value to the fontSize property:

let element = document.querySelector('p'); // Assign 24px font size to the paragraph element.style.fontSize = '24px';

We obtain a number from the field with the slider. But in order to assign the font size, we also need to specify the units of measurement. In our case, this will be pixels. Use concatenation to obtain the correct value:

longread.style.fontSize = sizeSetting.value + 'px';

Imagine that the user selected the number 16 using the slider. In that case the result of concatenation is written to the element styles: '16px':

<article class="longread" style="font-size: 16px">

Assign this size to the article text that the user selected, and make sure that the setting works.