JavaScript-də ölçü vahidləri ile baş verən səhvlər

Tez-tez səhv etmək və ölçü vahidlərini unutmaq asandır. Məsələn, belə:

javascriptlet width = 100;
elem.style.width = width; // ups...

Düzgün olan, dəyəri piksellərdə göstərməkdir:

javascriptlet width = 100;
elem.style.width = width + 'px';

Təsəvvür edək ki, eni müəyyən bir dəyər qədər artırmaq istəyirik. Bunun üçün əvvəlcə eni oxumalı, sonra rəqəmi çıxarmalı, ona lazımi dəyəri əlavə etməli, 'px' əlavə etməli və yalnız bundan sonra geri yazmalıyıq:

javascriptlet widthPx = elem.style.width;
let widthNm = parseInt(widthPx);
elem.style.width = (widthNm + 30) + 'px';

Задание 1

Aşağıdakı koddakı səhvi izah edin:

html<div style="font-size: 16px;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = elem.style.fontSize + 2;

Задание 2

Aşağıdakı koddakı səhvi izah edin:

html<div style="font-size: 16px;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize + 2) + 'px';

Задание 3

Aşağıdakı koddakı səhvi izah edin:

html<div style="font-size: 2.5em;">
  text
</div>

javascriptlet elem = document.querySelector('div');
elem.style.fontSize = parseInt(elem.style.fontSize) + 2 + 'em';

Задание 4

Div verilmişdir:

html<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
  text
</div>

Həmçinin bir düymə verilmişdir. Düyməyə kliklədikdə divin enini və hündürlüyünü 50px qədər artırın.

Задание 5

Div verilmişdir:

html<div id="elem" style="width: 300px; height: 200px; border: 1px solid red;">
  text
</div>

Həmçinin bir düymə verilmişdir. Düyməyə kliklədikdə divin enini və hündürlüyünü 10% qədər artırın.