ตัวอย่าง
ได้รับการคำนวณ (actual showing) สีพื้นหลังของ div นี้:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>ผลที่จะได้รับ:
The computed background color for the test div is: rgb(173, 216, 230) ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
getComputedStyle() วิธีการรับทั้งหมดที่เกิดขึ้นจริง (computed) คุณสมบัติ CSS และค่าขององค์ประกอบที่ระบุ
รูปแบบการคำนวณเป็นรูปแบบที่ใช้ในการแสดง acutally องค์ประกอบหลังจากสไตล์จากหลายแหล่งได้รับการ apllied
แหล่งที่มาของรูปแบบรวมไปถึงแผ่นภายในสไตล์แผ่นลักษณะภายนอกรูปแบบการสืบทอดและรูปแบบเริ่มต้นเบราว์เซอร์
getComputedStyle() วิธีการส่งกลับ วัตถุ CSSStyleDeclaration
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
วากยสัมพันธ์
ค่าพารามิเตอร์ พารามิเตอร์ ลักษณะ element จำเป็นต้องใช้ องค์ประกอบที่จะได้รับรูปแบบการคำนวณสำหรับ pseudoElement ไม่จำเป็น. หลอกองค์ประกอบที่จะได้รับ
รายละเอียดทางเทคนิค
กลับค่า: วัตถุ CSSStyleDeclaration มีบล็อกประกาศ CSS ขององค์ประกอบ
ตัวอย่างอื่น ๆ
ตัวอย่าง
รับทุกรูปแบบการคำนวณจากองค์ประกอบ:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> ลองตัวเอง» ตัวอย่าง
ขนาดตัวอักษรได้รับเครื่องคอมพิวเตอร์ของตัวอักษรตัวแรกใน div ทดสอบ (โดยใช้องค์ประกอบหลอก):
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> ลองตัวเอง»