การอ่านคุณสมบัติจากไฟล์ CSS ใน JavaScript

คุณสมบัติที่กำหนดในไฟล์ CSS สามารถอ่านได้โดยใช้ฟังก์ชันพิเศษ getComputedStyles

มาดูกันว่าทำได้อย่างไร สมมติว่าเรามีองค์ประกอบต่อไปนี้:

<div id="elem">
	text
</div>

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

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

รับลิงก์ไปยังองค์ประกอบไว้ในตัวแปร:

let elem = document.querySelector('#elem');

ตอนนี้ส่งลิงก์ไปยังองค์ประกอบที่ได้รับเป็นพารามิเตอร์ของฟังก์ชัน getComputedStyles:

let computedStyle = getComputedStyle(elem);

ผลลัพธ์ที่ได้คือวัตถุที่มีค่า CSS properties สำหรับองค์ประกอบของเรา ลองใช้มันเพื่ออ่านตัวอย่างเช่นสี:

console.log(computedStyle.color); // จะแสดงผล 'red'

และตอนนี้ความกว้าง:

console.log(computedStyle.width); // จะแสดงผล '100px'

และตอนนี้ขนาดฟอนต์:

console.log(computedStyle.fontSize); // จะแสดงผล '20px'

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

#elem {
	width: 200px;
	height: 200px;
}

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

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

#elem {
	width: 200px;
	height: 200px;
}

เมื่อคลิกที่ปุ่ม ให้เพิ่มความกว้างและความสูงขององค์ประกอบเป็นสองเท่า