ກົນສະແດງຄູ່ມູນຄືນຄວາມຄືບຄາບ

  • ບ່ອນໄກຫຍັງ
  • ບ່ອນໄກຕໍ່ໄປ
  • ກັບຄືນອັບສອງຊັ້ນ Window Object

ການອະທິບາຍ ແລະ ການນໍາໃຊ້.

getComputedStyle() ວິທີການທີ່ຂໍ້ມູນການກະຈາຍ CSS ແລະ ຄຸນຄ່າຂອງ HTML Element.

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 ອີກຫລາຍ. ປະເພດ pseudoElement ທີ່ຈະເອົາ.

ຄຳສົ່ງຜົນ

ຮູບແບບ ການອະທິບາຍ
ວັດຖຸ ວັດຖຸ CSSStyleDeclaration ທີ່ມີທັງສະແນນ ແລະ ຄຸນຄ່າຂອງ CSS ຂອງມູນນິວໂຄມາດ.

ຄວາມແຕກຕ່າງລະຫວ່າງວິທີການ getComputedStyle() ແລະ ການປະເພດ style

ການປຽບທຽບວິທີການ getComputedStyle() ກັບການປະເພດ style ຂອງ HTMLElement: ສິ່ງລັງສະເພາະພຽງແຕ່ສະແນນກົວຂອງມູນນິວໂຄມາດຢ່າງທີ່ທ່ານໄດ້ກໍານົດໄວ້ທັງໝົດ ແລະ, ບໍ່ສາມາດບອກຄວາມຂໍ້ມູນກ່ຽວກັບການນຳໃຊ້ສະແນນກົວຂອງການກະຈາຍວິທີການແບບຂອງມູນນິວໂຄມາດ.

ການອອກຄະແນນນຳສະໜັບສະໜູນ

ທຸກການອອກຄະແນນນຳສະໜັບສະໜູນ getComputedStyle()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ສະໜັບສະໜູນ 9-11 ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ
  • ບ່ອນໄກຫຍັງ
  • ບ່ອນໄກຕໍ່ໄປ
  • ກັບຄືນອັບສອງຊັ້ນ Window Object