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 style transform

语法也应该是正确的。我没有收到任何错误消息，如果我使用其他样式，此代码也有效。

Answer 1

您不需要为该字符串添加额外的引号。字符串是字符串。只有代码中的字符串文字才需要引号，而您已经有了引号。

这是一个 jQuery 版本：

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

Javascript 添加转换作为内联样式

Javascript add transform as an inline style

javascript

css-transforms