Case study (#1): How to get the current style value of an element and change it using JavaScript?

Picture of athree23 from Pixabay

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

Popularne posty z tego bloga

Wygląda na to, że GITarra 😎 (40)

Obraz
    Photo by Yancy Min on Unsplash W poprzednim wpisie pisałem o tym, jak się borykałem z „partials” w Sass. Ostatecznie okazało się, że problemem było niewłaściwe użycie przeze mnie komend @use i @forward. Pisałem też, że kolejnym wyzwaniem, z którym musiałem się zmierzyć, był system kontroli wersji, jakim jest GIT oraz GitHub, który z kolei jest serwisem internetowym do zdalnej pracy z projektami z wykorzystaniem GIT. Otóż w trakcie „walki” z Sass kilkukrotnie commitowałem zmiany do GitHub, po to, żeby po dojściu do rozwiązania problemu, móc przywrócić projekt do stanu sprzed eksperymentów i wdrożyć partials jak należy. Między innymi właśnie po to powstały systemy kontroli wersji, żeby zapisywać pewne etapy pracy i móc w dowolnym momencie je przywrócić. Oprócz tego pozwalają one na jednoczesną pracę nad projektem wielu osobom bez ryzyka konfliktu wprowadzanych modyfikacji (w tym celu korzysta się z tzw. branch'y). Ja nad projektem pracuję sam, więc dla mnie, to jest
Czytaj więcej

Pociąg "IT" do stacji "Software Developer" odjeżdża z toru przy peronie pierwszym. (41)

Obraz
Obraz more photos boosty.to/victoria_art_music z Pixabay Długo nie pisałem, ale nie dlatego, że się poddałem, że sobie odpuściłem. Powody braku mojej aktywności były dwa. Po pierwsze postanowiłem sobie zrobić krótkie wakacje, najpierw tydzień nie było dzieci, więc mogłem z żoną skupić się na pracach domowych, które były trudne do wykonania, z dziećmi w domu. Potem na tydzień dołączyłem do moich pociech i większość czasu spędziłem nad jeziorem oraz na innych formach relaksu. O drugim powodzie wspomniałem już w poprzednim blogu. Wydarzyło się coś, co mogło diametralnie zmienić moją sytuację i nie chciałem pisać, dopóki sytuacja się nie wyjaśni. Teraz mogę już napisać co to było - brałem udział w rekrutacji do jednego z dużych polskich Software House. Pierwszy etap rozmowy, czyli klasyczne interview z Karoliną z działu HR odbył się w tygodniu poprzedzającym mój ostatni wpis. Mam duże doświadczenie w rekrutacji, zarówno jako kandydat, ale jeszcze większe jako osoba rekrutuj
Czytaj więcej

Pracuje się, oj pracuje... (44)

Obraz
Obraz Gerd Altmann z Pixabay Zapowiadałem napisanie kilku słów o tym, jak wygląda moja pierwsza praca w IT. Myślę, że teraz jest na to dobry moment. Jestem zatrudniony przez Softwerhouse, ale pracę wykonuję dla Brytyjskiego klienta, który to dostarcza narzędzie do obsługi benefitów pracowniczych dla korporacji działających na terenie Wielkiej Brytanii i nie tylko. Firmy, dla jakich dostarczane jest to rozwiązane to w większości znane globalne korporacje, ale też wiele podmiotów, których nazwy nigdy nie obiły mi się o uszy. Myślę, że warto tutaj wspomnieć, o jakiego tym rodzaju benefity są tym pracownikom oferowane. Każdy, kto pracował w jakiejś korporacji działającej na polskim rynku, ale też w mniejszy polskich firmach, na pewno spotkał się z takimi benefitami jak: prywatna opieka medyczna, karta multisport, tudzież dodatkowe ubezpieczenia na życie, od nieszczęśliwych wypadków itp. W zasadzie można by powiedzieć, że na tym się kończą oferowane w kraju nad Wisłą benefity
Czytaj więcej