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ə:

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

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

let 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:

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

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

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

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

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

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

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

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

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

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

Div verilmişdir:

<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.

Div verilmişdir:

<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.