يتضمن النهج التقليدي ضبط كل خاصية مسبوقة يدويًا ، كما هو موضح في كتلة الكود:

var transform = 'translate3d (0،0،0)' ؛ elem.style.WebKitTransform = transform ؛ elem.style.moztransform = transform ؛ elem.Style.MStransform = transform ؛ elem.style.otransform = transform ؛

حل مبسط

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

لتبسيط هذه العملية ، يمكن إنشاء وظيفة مخصصة: العنصر ، الخاصية ، القيمة) { element.style ["webkit" الخاصية] = القيمة ؛ element.style ["moz" property] = value ؛ element.style ["ms" property] = value ؛ element.style ["O" property] = value ؛ }

تأخذ هذه الوظيفة ثلاث معلمات: العنصر إلى النمط ، والخاصية لتعيينها ، والقيمة المطلوبة. إنه يتكرر من خلال البادئات المدعومة ويعين الأنماط المناسبة.

الاستخدام

] setvendor (elem ، "transform" ، transform) ؛

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

هذا السطر المفرد من الكود يطبق بشكل فعال نمط التحويل مع جميع بادئات البائع الضرورية ، مما يجعل التصميم نسيمًا.