เมธอด getComputedStyle()

การกำหนดและการใช้งาน

getComputedStyle() เมธอดนี้ดึงสไตล์ที่คำนวณแล้วของคุณสมบัติ CSS ขององค์ประกอบ HTML

getComputedStyle() เมธอดนี้คืนค่าองค์ประกอบ CSSStyleDeclaration

สไตล์ที่คำนวณแล้ว

สไตล์ที่คำนวณแล้วหมายถึงสไตล์ที่ใช้บนองค์ประกอบหลังจากที่ทุกแหล่งข้อมูลสไตล์ได้ถูกใช้

แหล่งข้อมูลสไตล์: สไตล์ด้านนอกและด้านใน สไตล์ที่สืบทอดและสไตล์มาตรฐานของเว็บเบราเซอร์

ดูเพิ่มเติมที่:

CSSStyleDeclaration วัตถุ

ตัวอย่าง

ตัวอย่าง 1

ดึงสไตล์ที่คำนวณแล้วของสีหลังพื้นขององค์ประกอบ

const element = document.getElementById("test");
const cssObj = window.getComputedStyle(element, null);
let bgColor = cssObj.getPropertyValue("background-color");

ลองทำด้วยตัวเอง

ตัวอย่าง 2

ดึงสไตล์ที่คำนวณแล้วทั้งหมดจากองค์ประกอบ

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>";
}

ลองทำด้วยตัวเอง

ตัวอย่าง 3

เรียกใช้ขนาดของภาษาไทยของตัวอักษรแรกในองค์ประกอบ (ใช้โปรไฟล์เพลสโซยูเลล์):

const element = document.getElementById("test"); const cssObj = window.getComputedStyle(element, ":first-letter")
let size = cssObj.getPropertyValue("font-size");

ลองทำด้วยตัวเอง

การใช้งาน

window.getComputedStyle(element, pseudoElement)

ตัวแปร

ตัวแปร การอธิบาย
element จำเป็น องค์ประกอบที่ต้องการหาสไตล์ที่คำนวณแล้ว
pseudoElement เลือกตั้งตามต้องการ สำหรับโปรไฟล์เพลสโซยูเลล์ที่ต้องการจะเรียกใช้

ค่าที่คืนค่า

ประเภท การอธิบาย
เป้าหมาย องค์ประกอบ CSSStyleDeclaration ที่มีคุณสมบัติและค่าของ CSS ทั้งหมดขององค์ประกอบ

ความแตกต่างระหว่างเมธอด getComputedStyle() และคุณสมบัติ style

เปรียบเทียบเมธอด getComputedStyle() กับคุณสมบัติ style ของ HTMLElement: คุณสมบัติ style ยอมให้เข้าถึงรูปแบบที่ใช้ในลิเนียร์ (inline) ทุกหน่วยที่คุณกำหนด และไม่สามารถบอกให้ทราบข้อมูลเกี่ยวกับรูปแบบที่ใช้ในตารางสไตล์ขององค์ประกอบ (element) อีก

การสนับสนุนโปรแกรมบราวเซอร์

ทุกบราวเซอร์เข้าถึง getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน