การแปลงค่าที่อ่านได้ใน JavaScript

ฟังก์ชัน getComputedStyles ไม่ได้รับค่าที่กำหนดไว้ใน CSS โดยตรง มันแปลงค่าดังกล่าวเป็นค่าสัมบูรณ์ ซึ่งมักเป็นหน่วยพิกเซล

มาดูตัวอย่างกัน สมมติว่าเรากำหนดความกว้างเป็นเปอร์เซ็นต์:

#elem {
	width: 100%;
}

อย่างไรก็ตาม เมื่ออ่านค่าความกว้าง เราจะได้รับ ค่าไม่ใช่เปอร์เซ็นต์ แต่เป็นหน่วยพิกเซล:

console.log(computedStyle.width); // ค่าเป็น px

สำหรับองค์ประกอบได้กำหนดสไตล์ดังต่อไปนี้:

#elem {
	font-size: 2em;
}

เมื่อคลิกที่ปุ่ม ให้แสดงขนาด ฟอนต์ขององค์ประกอบ