Foute met meeteenhede in JavaScript

Dit is maklik om 'n fout te maak en die meeteenheid te vergeet. Byvoorbeeld, so:

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

Die korrekte manier is om die waarde in pixels te spesifiseer:

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

Stel ons voor dat ons die breedte met 'n sekere waarde wil vergroot. Om dit te doen, moet ons eers die breedte lees, dan die nommer uittrek, die benodigde waarde daarby tel, 'px' byvoeg en eers dan terugskryf:

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

Verduidelik wat die fout is in die volgende kode:

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

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

Verduidelik wat die fout is in die volgende kode:

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

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

Verduidelik wat die fout is in die volgende kode:

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

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

Daar is 'n div:

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

Daar is ook 'n knoppie. Met 'n klik op die knoppie, verhoog die breedte en hoogte van die div met 50px.

Daar is 'n div:

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

Daar is ook 'n knoppie. Met 'n klik op die knoppie, verhoog die breedte en hoogte van die div met 10%.