วิธี getComputedStyle()

  • หน้าก่อน
  • หน้าต่อไป
  • กลับไปยังชั้นบน Window 对象

คำนิยามและวิธีใช้

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

เข้าถึงขนาดของตัวอักษรในต้นขององค์ประกอบ (ใช้ pseudoElement):

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

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

กฎระเบียบ

window.getComputedStyle(element, pseudoElement)

ตัวแปร

ตัวแปร การอธิบาย
element จำเป็น
pseudoElement เลือกตั้ง

ค่าที่ส่งกลับ

ประเภท การอธิบาย
ตัวแปร เป็นอ็อบเจกที่มีทั้งหมด CSS และค่าของ CSSStyleDeclaration

ความแตกต่างระหว่างวิธี getComputedStyle() และตัวแปร style

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

การเข้าถึงของบราวเซอร์

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน
  • หน้าก่อน
  • หน้าต่อไป
  • กลับไปยังชั้นบน Window 对象