Javascript ajouter la transformation comme un style en ligne

Question

J'ai une question rapide: comment pouvez-vous ajouter des transformations comme un style en ligne via JavaScript? Pendant la dernière heure, j'ai essayé de résoudre ce problème et j'ai aussi cherché partout, mais rien n'a fonctionné. Voici mon code:

HTML:

<ul id="slider"> 
    <li class="slide"></li> 
    <li class="slide"></li> 
    <li class="slide"></li> 
    <li class="slide"></li> 
</ul> 

JavaScript:

var windowWidth = $(window).width(); 
var centerDistance = windowWidth/2; 
var targets = $(".slide"); 
var inlineTransform = '"' + "translateZ(" + centerDistance + "px)" + '"'; 
for (var i = 0; i < targets.length; i++) { 
    targets[i].style.WebkitTransform = inlineTransform; 
    targets[i].style.msTransform = inlineTransform; 
    targets[i].style.transform = inlineTransform; 
} 

Selon W3Schools, rien est mal orthographié et tous les préfixes sont corrects: w3schools DOM style transform

La syntaxe devrait être correct aussi. Je ne reçois aucun message d'erreur et ce code fonctionne si j'utilise d'autres styles.

Answer 1

Vous n'avez pas besoin d'ajouter de guillemets supplémentaires à cette chaîne. Une chaîne est une chaîne. Les citations sont seulement nécessaires pour les littéraux de chaîne dans le code, et vous les avez déjà.

est ici une version jQuery:

var centerDistance = $(window).width()/2; 
var t = "translateZ(" + centerDistance + "px)"; 
var style = { 
    WebkitTransform: t, 
    msTransform: t, 
    transform: t 
}; 
$(".slide").css(style);