ການສະແດງສັນຍາ

ການປ່ຽນຄູ່ມວນຄວາມໃນ JavaScript

ຄູ່ມວນຄວາມ CSS ສາມາດເຂົ້າເຖິງ DOM, ຄວາມວ່າທ່ານສາມາດປ່ຽນພວກເຂົາໂດຍ JavaScript.

ຄວາມນີ້ອະທິບາຍວິທີທີ່ຈະສ້າງການຫຼັກກະຕຸບາຍເພື່ອສະແດງແລະປ່ຽນຄູ່ມວນຄວາມ --blue ທີ່ຖືກໃຊ້ໃນຄວາມນີ້. ຕອນນີ້ຖ້າທ່ານບໍ່ຮູ້ບັນສາ JavaScript, ບໍ່ຕ້ອງການກັງວົນ. ທ່ານສາມາດບິນຫຼາຍຂໍ້ຄວາມຂອງ JavaScript ໃນການສອນ JavaScript ຂອງພວກເຮົາ:

ຄວາມນຳສະເໜີ

<script>
// ການຄົ້ນຫາບັນຊີຫຼັກ
var r = document.querySelector(':root');
// ການສ້າງຫົວຫນ້າຂອງການຄົ້ນຫາຄູ່ມວນຄວາມ
function myFunction_get() {
  // ການຮຽບຮ້ອງຮູບແບບ (ຄວາມຂອງລັກສະນະແລະຄູ່ມວນຄວາມ) ສໍາລັບບັນຊີຫຼັກ
  var rs = getComputedStyle(r);
  // ການອອກມະນູນຄູ່ມວນຄວາມຂອງ --blue
  alert("ຄູ່ມວນຄວາມຂອງ --blue ແມ່ນ: " + rs.getPropertyValue('--blue'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

Try It Yourself

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Function
var() 49.0 15.0 31.0 9.1 36.0

Function var()

Function Description
var() Insert the value of the CSS variable.