JavaScriptда ўлчов бирликлари хатолари

Кўпинча ўлчов бирлигини унутиб қўйиш осондан иш хатога кетади. Масалан, шундай:

let width = 100;
elem.style.width = width; // упс...

Тўғри усулда пикселлардаги қийматни кўрсатиш керак:

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

Тасаввур қилайлик, биз энини маълум бир қийматга оширмоқчимиз. Бунинг учун аввало энини ўқишимиз керак, сўнг рақамни ажратиб олишимиз керак, унга керакли қийматни қўшишимиз керак, 'px' қўшишимиз керак ва фақат сўнг орқага ёзишимиз керак:

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

Куйидаги коддаги хатоликни тушантиринг:

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

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

Куйидаги коддаги хатоликни тушантиринг:

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

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

Куйидаги коддаги хатоликни тушантиринг:

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

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

Див берилган:

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

Тугма хам берилган. Тугма босилганда дивнинг эни ва бўйини 50px га оширинг.

Див берилган:

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

Тугма хам берилган. Тугма босилганда дивнинг эни ва бўйини 10% га оширинг.