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

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

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

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

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

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

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

Задание 1

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

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

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

Задание 2

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

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

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

Задание 3

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

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

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

Задание 4

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

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

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

Задание 5

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

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

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