Хатоҳо бо воҳидҳои ченак дар 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;">
	матн
</div>

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

Шарҳ диҳед, ки хато дар рамзи зерин дар чист:

<div style="font-size: 16px;">
	матн
</div>

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

Шарҳ диҳед, ки хато дар рамзи зерин дар чист:

<div style="font-size: 2.5em;">
	матн
</div>

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

Div дода шудааст:

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

Тугма низ дода шудааст. Бо клик кардан ба тугма паҳнӣ ва баландии div-ро зиёд кунед ба 50px.

Div дода шудааст:

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

Тугма низ дода шудааст. Бо клик кардан ба тугма паҳнӣ ва баландии div-ро зиёд кунед ба 10%.