Case study (#1): How to get the current style value of an element and change it using JavaScript?
Today I was working with an exercise from a JS course. One of the tasks was to change the font-size of the <p> element by clicking the "+" and/or "-" button. An additional challenge was to stop increasing/decreasing the size when the font-size property gets a certain value.
<body>
<button class="sizeUp">+</button>
<button class="sizeDown">-</button>
<p>Lorem ipsum dolor sit amet.</p>
</body>
p {
font-size: 36px;
}
I encountered three issues while trying to solve this problem:
1. How to get the current font-size property value of <p> element?
My first choice was to use the style attribute:
const p = document.querySelector('p');
const pFontSize = p.style.fontSize;
console.log(pFontSize);
but in this case, console returned a null value.
I found that the reason of this is because style attribute works only with inline styles. It is not really useful to get style information that comes from any other source, such as the style rules defined using external style sheets.
The solution was to use getComputedStyle() method. It is always called on the
windowand returns an object containing the values of all CSS properties of an element. It is therefore necessary to create another variable that retrieves the font size value from this object.const p = document.querySelector('p');
const pStyles = window.getComputedStyle(p);
const pFontSize = pStyles.fontSize;
console.log(pFontSize);
Here the console returned the correct value: 36px.
2. How to add/subtract certain value to font-size property?
The problem is, that in JavaScript, you can't add or subtract to variable a value in pixels just like that:
const newPFontSize = pFontSize + '10px';
console.log(newPFontSize);
because this will return a string: '36px10px'.
The only solution I found is to change the pFontSize type to number, by using the parseInt() function. Than add/subtract the certain value and add "px" string:
const p = document.querySelector('p');
const pStyles = window.getComputedStyle(p);
const pFontSize = parseInt(pStyles.fontSize);
const newPFontSize = pFontSize + 5 + 'px';
console.log(newPFontSize);
Console returned a value: 41px, witch is correct.
3. How to stop increasing/decreasing the size when certain value of font size property will be achieved?
The last point was quite easy to resolve. I just had to use the if conditional statement and set the top and bottom font-size value condition.
In the end, my code looked like this:
const p = document.querySelector('p');
const pStyles = window.getComputedStyle(p);
const plusBTN = document.querySelector('.sizeUp');
const minusBTN = document.querySelector('.sizeDown');
const sizeUp = () => {
const pFontSize = parseInt(pStyles.fontSize);
if (pFontSize < 50) p.style.fontSize = pFontSize + 5 + 'px';
};
const sizeDown = () => {
const pFontSize = parseInt(pStyles.fontSize);
if (pFontSize > 20) p.style.fontSize = pFontSize - 5 + 'px';
};
plusBTN.addEventListener('click', sizeUp);
minusBTN.addEventListener('click', sizeDown);
and it works fine 😎
I hope You enjoyed this little case study. If yes, give me 🤘 in your comments.
Komentarze
Prześlij komentarz