Erreurs avec les unités de mesure en JavaScript

Il est souvent facile de se tromper et d'oublier les unités de mesure. Par exemple, comme ceci :

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

Il est correct de spécifier la valeur en pixels :

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

Imaginons que nous voulions augmenter la largeur d'une certaine valeur. Pour cela, nous devons d'abord lire la largeur, puis extraire le nombre, lui ajouter la valeur souhaitée, ajouter 'px' et seulement ensuite l'écrire en retour :

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

Expliquez quelle est l'erreur dans le code suivant :

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

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

Expliquez quelle est l'erreur dans le code suivant :

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

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

Expliquez quelle est l'erreur dans le code suivant :

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

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

Étant donné une div :

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

Un bouton est également donné. Sur le clic du bouton, augmentez la largeur et la hauteur de la div de 50px.

Étant donné une div :

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

Un bouton est également donné. Sur le clic du bouton, augmentez la largeur et la hauteur de la div de 10%.