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 :

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

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

javascriptlet 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 :

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

Задание 1

Expliquez quelle est l'erreur dans le code suivant :

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

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

Задание 2

Expliquez quelle est l'erreur dans le code suivant :

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

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

Задание 3

Expliquez quelle est l'erreur dans le code suivant :

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

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

Задание 4

Étant donné une div :

html<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.

Задание 5

Étant donné une div :

html<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%.