Mittayksiköt style-attribuutissa JavaScriptissä

Kun määritetään ominaisuuksien arvoja style-attribuutin kautta, meidän on annettava mittayksiköt:

elem.style.width = '100px';

Kun arvoja luetaan, ne saadaan myös mittayksiköiden kanssa:

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

Tarvittaessa voimme päästä eroon mittayksiköistä käyttämällä parseInt:

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

Jos oletetaan murtolukuarvoja, voidaan käyttää parseFloat-funktiota:

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

Annettu div ja painike. Painiketta painettaessa aseta diville leveys 400px:ksi ja korkeus 300px:ksi.

Annettu div:

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

Myös painike annettu. Painiketta klikattaessa tulosta divin leveys ja korkeus ilman mittayksiköitä.

Annettu div:

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

Myös painike annettu. Painiketta klikattaessa tulosta divin fontin koko ilman mittayksikköä.