Javascript將轉換添加為內聯樣式

Question

我有一個快速的問題：如何通過JavaScript將轉換作為內聯樣式添加？ 在過去的一個小時里，我一直在嘗試解決此問題，並且一直在到處搜索，但是沒有任何效果。 這是我的代碼：

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;
 }

根據w3schools的說法，沒有什么拼寫錯誤，並且所有前綴都是正確的： w3schools DOM樣式轉換

語法也應該正確。 我沒有收到任何錯誤消息，如果我使用其他樣式，則此代碼有效。

Answer 1

您無需在該字符串上添加其他引號。 字符串是字符串。 引號僅在代碼中的字符串文字中需要，並且您已經有了引號。

這是jQuery版本：

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