Måleenheter i style-attributtet i JavaScript

Ved angivelse av egenskapsverdier gjennom attributtet style må vi angi måleenheter:

elem.style.width = '100px';

Ved lesing av verdier vil de også bli hentet med måleenheter:

let width = elem.style.width;
console.log(width); // vil skrive ut '100px';

Ved behov kan vi fjerne måleenheter med parseInt:

let width = elem.style.width;
console.log(parseInt(width)); // vil skrive ut 100

Hvis brøkverdier er forventet, kan du bruke funksjonen parseFloat:

let width = elem.style.width;
console.log(parseFloat(width));

Gitt en div og en knapp. Ved klikk på knappen sett divens bredde til 400px, og høyden til 300px.

Gitt en div:

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

Også gitt en knapp. Ved klikk på knappen skriv ut divens bredde og høyde uten måleenheter.

Gitt en div:

<div id="elem" style="font-size: 1.5em;">
	text
</div>

Også gitt en knapp. Ved klikk på knappen skriv ut divens skriftstørrelse uten måleenheter.