ฟังก์ชัน getComputedStyle

ฟังก์ชัน getComputedStyle ช่วยให้ ได้ค่าของคุณสมบัติ CSS ใด ๆ ขององค์ประกอบ แม้จากไฟล์ CSS

ไวยากรณ์

let วัตถุ = getComputedStyle(องค์ประกอบ);

รายละเอียด

มันทำงานอย่างไร (โปรดทราบ: ไม่เหมือนที่เรา คาดหวัง): พารามิเตอร์ของฟังก์ชันรับองค์ประกอบ และส่งคืนวัตถุ ที่มี คุณสมบัติ CSS ทั้งหมดขององค์ประกอบที่ส่งมา ไว้ในนั้น ลองใส่วัตถุนี้ลงในตัวแปร style ชื่อเป็นไปตามต้องการ นี่คือ แค่ตัวแปร - ตั้งชื่ออย่างไร ก็จะ อ้างอิงแบบนั้น:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // ใน style มีคุณสมบัติ CSS อยู่

ลองแสดงผล ตัวอย่างเช่น ความกว้าง ทำได้ ดังนี้ - style.width:

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

let style = getComputedStyle(elem);
console.log(style.width);

เพื่อแสดงผล ตัวอย่างเช่น padding ด้านซ้าย - ทำได้ดังนี้ - style.paddingLeft:

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

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

ในตัวอย่างต่อไปนี้ เราจะแสดงคุณสมบัติ CSS ทั้งหมดที่เราสนใจสำหรับองค์ประกอบของเรา:

<div id="elem">ข้อความ</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // จะได้ '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // จะได้ '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // จะได้ 'solid'

ความไม่แม่นยำของ getComputedStyle

บางครั้งฟังก์ชัน getComputedStyle ทำงาน ไม่ถูกต้องทั้งหมดเกี่ยวกับความกว้างและความสูง สิ่งนี้เกี่ยวข้องกับความจริงที่ว่า padding และขอบ ทำให้บล็อกขยายออก ในตัวอย่างถัดไป บล็อก ถูกกำหนดความกว้าง 200px และยังมีขอบ และ border ด้วย ความกว้างจริงของบล็อกคือ 300px แต่ getComputedStyle จะยังคงแสดงผล 200px:

<div id="elem">ข้อความ</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // จะได้ '200px'
console.log('height: ' + style.height); // จะได้ '200px'

นั่นคือ: ปรากฎว่า getComputedStyle เพิกเฉยต่อการขยายบล็อกและแสดงขนาด ของมัน ราวกับว่าไม่มีการขยายนั้น แต่ยังไม่หมด: การมีอยู่หรือไม่มี แถบเลื่อนก็มีความสำคัญเช่นกัน - บางส่วน ของเบราว์เซอร์จะหักความกว้างของแถบเลื่อน ออกจากความกว้างที่คำนวณผ่าน getComputedStyle แต่บางส่วนก็ไม่หัก โดยรวมแล้วที่นี่ ทั้งหมดไม่ข้ามเบราว์เซอร์และควรจะไม่ใช้ getComputedStyle สำหรับกำหนดความกว้างและความสูง แต่ใช้เมตริกที่เราจะศึกษา ด้านล่างแทน

ค่าที่คำนวณได้

ยังมีรายละเอียดปลีกย่อยอีกอย่างหนึ่ง: ถ้าความกว้างถูกกำหนดเป็น % - หลังจากการทำงานของ getComputedStyle เราจะเห็น มันในหน่วย px นั่นคือโดยพื้นฐานแล้ว เราไม่ได้ ความกว้างที่กำหนด แต่เป็นความกว้างที่คำนวณได้ ดู จากตัวอย่างถัดไป:

<div id="elem">ข้อความ</div>

#elem {
	width: 30%; /* กำหนดความกว้างเป็น % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // จะแสดงความกว้างในหน่วย px

ดูเพิ่มเติม

คุณสมบัติ cssText,
ที่กำหนดสไตล์ CSS อย่างเป็นกลุ่ม