Bagaimana untuk Mengakses Nilai Gaya Elemen HTML dalam JavaScript Tanpa Menggunakan Perpustakaan?

Mengakses Nilai Gaya Elemen HTML dalam JavaScript tanpa Perpustakaan

Pengenalan:

Memanipulasi atribut gaya elemen HTML adalah perkara yang penting aspek aplikasi web dinamik. Soalan ini meneroka cara untuk mendapatkan nilai gaya daripada elemen yang mempunyai gaya ditetapkan melalui teg, khususnya tanpa bergantung pada perpustakaan luaran.

Mendapatkan Nilai Gaya:

Untuk mendapatkan semula gaya sebaris yang ditakrifkan menggunakan tag, kita mesti mengakses gaya dikira elemen. Gaya yang dikira ini mewakili nilai sebenar yang digunakan pada elemen, walaupun ia ditindih oleh gaya sebaris atau diwarisi daripada unsur induk.

Pendekatan Penyemak Imbas Merentas:

Mendapatkan pelayar silang gaya yang dikira boleh menjadi rumit. Internet Explorer (IE) mempunyai mekanisme tersendiri, element.currentStyle, manakala penyemak imbas lain menggunakan kaedah document.defaultView.getComputedStyle.

Fungsi Merentas Pelayar:

Untuk memudahkan pelaksanaan pelayar silang ini, fungsi yang dipanggil getStyle() boleh ditakrifkan:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView && defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) {
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return convertIEValueToPixels(value);
    }
    return value;
  }
}

Fungsi ini membersihkan nama harta untuk keserasian merentas penyemak imbas dan mengendalikan penukaran unit pada IE.

Penggunaan:

Untuk dapatkan semula sifat gaya tertentu, gunakan fungsi getStyle() dengan nama sifat yang diingini, seperti sebagai:

var width = getStyle(document.getElementById("box"), "width");

Keterbatasan:

Fungsi getStyle() menyediakan pendekatan merentas pelayar yang berguna. Walau bagaimanapun, ia mempunyai had, terutamanya dalam mengendalikan sifat tertentu, seperti warna, di mana IE boleh mengembalikan nilai yang ditentukan dan bukannya nilai yang dikira. Contohnya, sifat warna yang ditakrifkan sebagai #ff0000 mungkin kembali merah apabila memanggil getStyle().

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Nilai Gaya Elemen HTML dalam JavaScript Tanpa Menggunakan Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!