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:

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

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

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

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

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

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

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

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

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

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

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

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

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

Cho một div:

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

Cho một div:

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