Lỗi với đơn vị đo lường trong JavaScript

Thường rất dễ mắc lỗi và quên mất về đơn vị đo lường. Ví dụ, như thế này:

javascriptlet width = 100;
elem.style.width = width; // úi...

Đúng là phải chỉ định giá trị bằng pixel:

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

Hãy tưởng tượng chúng ta muốn tăng chiều rộng lên một giá trị nào đó. Để làm điều này, trước tiên chúng ta cần đọc chiều rộng, sau đó trích xuất số, cộng thêm vào đó giá trị cần thiết, thêm 'px' và chỉ sau đó ghi lại:

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

Задание 1

Hãy giải thích lỗi trong đoạn code sau:

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

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

Задание 2

Hãy giải thích lỗi trong đoạn code sau:

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

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

Задание 3

Hãy giải thích lỗi trong đoạn code sau:

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

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

Задание 4

Cho một div:

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

Cũng cho một nút bấm. Khi nhấp vào nút, hãy tăng chiều rộng và chiều cao của div lên 50px.

Задание 5

Cho một div:

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

Cũng cho một nút bấm. Khi nhấp vào nút, hãy tăng chiều rộng và chiều cao của div lên 10%.