Mätningsenheter i style-attributet i JavaScript

När vi specificerar egenskapsvärden via attributet style måste vi ange mätningsenheter:

elem.style.width = '100px';

När värden läses kommer de också att erhållas med mätningsenheter:

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

Vid behov kan vi bli av med mätningsenheterna med hjälp av parseInt:

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

Om bråkvärden förväntas, kan funktionen parseFloat användas:

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

Given en div och en knapp. Vid klick på knappen, sätt divens bredd till 400px, och höjd till 300px.

Given en div:

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

Given också en knapp. Vid klick på knappen, skriv ut divens bredd och höjd utan mätningsenheter.

Given en div:

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

Given också en knapp. Vid klick på knappen, skriv ut divens teckenstorlek utan mätningsenheter.