หน้าต่าง getComputedStyle()
ตัวอย่าง
รับสีพื้นหลังที่คำนวณขององค์ประกอบ:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");
ตัวอย่างเพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
วิธี การgetComputedStyle()
รับคุณสมบัติ CSS ที่คำนวณและค่าขององค์ประกอบ HTML
วิธี การgetComputedStyle()
ส่งคืน
CSSStyleDeclaration object
.
สไตล์คอมพิวเตอร์
สไตล์ที่คำนวณคือสไตล์ที่ใช้กับองค์ประกอบหลังจากใช้แหล่งที่มาของการจัดสไตล์ทั้งหมดแล้ว
แหล่งที่มาของสไตล์: สไตล์ชีตภายนอกและภายใน สไตล์ที่สืบทอด และสไตล์เริ่มต้นของเบราว์เซอร์
ดูสิ่งนี้ด้วย:
ออบเจ็ก ต์CSSStyleDeclaration
ไวยากรณ์
window.getComputedStyle(element, pseudoElement)
พารามิเตอร์
Parameter | Description |
element | Required. The element to get the computed style for. |
pseudoElement | Optional. A pseudo-element to get. |
คืนมูลค่า
พิมพ์ | คำอธิบาย |
วัตถุ | ออบเจ็กต์ CSSStyleDeclaration ที่มีคุณสมบัติและค่า CSS ทั้งหมดขององค์ประกอบ |
ตัวอย่างเพิ่มเติม
รับสไตล์ที่คำนวณทั้งหมดจากองค์ประกอบ:
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let text = "";
for (x in cssObj) {
cssObjProp = cssObj.item(x)
text += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
รับขนาดตัวอักษรที่คำนวณของตัวอักษรตัวแรกในองค์ประกอบ (โดยใช้องค์ประกอบหลอก):
const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");
รองรับเบราว์เซอร์
getComputedStyle()
รองรับในทุกเบราว์เซอร์:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |