ພາສາລາວ: Window getComputedStyle() 方法

定义和用法

getComputedStyle() 方法获取 HTML 元素的计算 CSS 属性和值。

getComputedStyle() 方法返回 CSSStyleDeclaration 对象。

计算样式

计算样式指的是在应用了所有样式来源之后在元素上使用的样式。

样式来源：外部和内部样式表、继承的样式和浏览器默认样式。

ອ່າງວ່າ:

ບັນດາໂອບເອັມໄອທີໂອມ ບັນດາໂອບເອັມໄອທີໂອມ

ບັນດາຄວາມຈິງ

ຕົວຢ່າງ 1

ການຄົ້ນພົບ ບາງຄວາມ background-color ຂອງບັນດາບາງບັນດາສັນຍານ:

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

ທົດລອງດີຕະຫຼອດ

ຕົວຢ່າງ 2

ການຄົ້ນພົບ ບັນດາບາງຄວາມ style ທີ່ຖືກນໍາໃຊ້ ຂອງບັນດາບາງບັນດາສັນຍານ:

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

ການຄົ້ນພົບ ບາງຄວາມ font-size ຂອງບັນດາບາງບາງອົງການທຳອິດ (ທີ່ໃຊ້ 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 ຈະອະນຸຍາດທີ່ຈະເຂົ້າເຖິງ ບັນດາບາງຄວາມ style ທີ່ຂຽນໃນກາງບາງບັນດາສັນຍານ ແລະ ຈະອະນຸຍາດໃຊ້ບັນດາອັນດັບທີ່ເຈົ້າຕ້ອງການ ແຕ່ບໍ່ສາມາດບອກເຫັນຄວາມຂອງບັນດາບາງຄວາມ style ທີ່ຖືກນໍາໃຊ້ໃນ ບັນດາບາງຄວາມ style ທີ່ຂຽນໃນບັນດາສັນຍານ.

浏览器支持

所有浏览器都支持 getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持