Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memudahkan Pembetulan Penjual CSS JavaScript?

Bagaimanakah Saya Boleh Memudahkan Pembetulan Penjual CSS JavaScript?

DDD
DDDasal
2024-12-04 02:16:101042semak imbas

How Can I Simplify JavaScript CSS Vendor Prefixing?

Awalan Vendor dengan JavaScript

Menggayakan elemen dengan CSS menggunakan JavaScript boleh membosankan, terutamanya apabila berurusan dengan awalan vendor. Pendekatan tradisional melibatkan menetapkan secara manual setiap sifat awalan, seperti yang dilihat dalam blok kod:

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

Penyelesaian Dipermudah

Untuk memudahkan proses ini, fungsi tersuai boleh dicipta:

function setVendor(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Fungsi ini mengambil tiga parameter: elemen untuk digayakan, sifat untuk ditetapkan dan nilai yang diingini. Ia berulang melalui awalan yang disokong dan menetapkan gaya yang sesuai.

Penggunaan

Menggunakan fungsi setVendor, blok kod di atas boleh dipermudahkan kepada:

setVendor(elem, "Transform", transform);

Barisan tunggal kod ini menggunakan gaya ubah secara berkesan dengan semua awalan vendor yang diperlukan, menjadikan penggayaan sebagai angin sepoi-sepoi.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memudahkan Pembetulan Penjual CSS JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn