Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie kann ich mit JavaScript Anbieterpräfixe effizient auf CSS-Eigenschaften anwenden?

DDD
Freigeben: 2024-11-18 19:32:02
Original
1003 Leute haben es durchsucht

How Can I Efficiently Apply Vendor Prefixes to CSS Properties with JavaScript?

Festlegen von Herstellerpräfixen für CSS mithilfe von Javascript

Das manuelle Anwenden von Herstellerpräfixen auf CSS-Eigenschaften kann mühsam sein. Das bereitgestellte Code-Snippet demonstriert diesen Prozess für die Transformationseigenschaft:

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

Gibt es eine effizientere Möglichkeit, dies zu erreichen, vorzugsweise mit einer einzigen Zeile JavaScript?

Lösung

Obwohl es keine bekannte Bibliothek gibt, die diese Aufgabe ausführt, ist das Erstellen einer benutzerdefinierten Funktion unkompliziert, da die Herstellerpräfixe in ihnen konsistent sind Syntax und Namen.

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;
}
Nach dem Login kopieren

Diese Funktion kann dann verwendet werden, um herstellerpräfixierte Eigenschaften festzulegen:

setVendor(elem, 'transform', 'translate3d(0,0,0)');
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript Anbieterpräfixe effizient auf CSS-Eigenschaften anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage