javascript - 如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、 -moz-transform 、 -o-transform 和 -ms-transform css？

Question

如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、-moz-transform 、-o-transform 和 -ms-transform css？

这段代码，我只使用 javascript 更改了 transform css。而且效果很好

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>    
<script type="text/javascript">
    function in_fn(){   
    document.getElementById("test").style.transform = "translate3d(0, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "out_fn()");
}
function out_fn(){
    document.getElementById("test").style.transform = "translate3d(-239px, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "in_fn()");
}
</script>

<div id="test" style="
            width: 200px;
            height: 200px;
            background: #000;
            transform: translate3d(-239px, 0px, 0px);
            -webkit-transform: translate3d(-239px, 0px, 0px);">
</div>

<div id="menu-button" onclick="in_fn()">CLIKC HERE</div>

https://jsfiddle.net/n76dbm7e/

但是当我将 -webkit-transform 、 -moz-transform 、 -o-transform 和 -ms-transform 添加到 javascript 代码中时，我的代码不起作用

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>    
<script type="text/javascript">
function in_fn(){   
    document.getElementById("test").style.transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.-webkit-transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.-moz-transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.-o-transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.-ms-transform = "translate3d(0, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "out_fn()");
}
function out_fn(){
    document.getElementById("test").style.transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.-webkit-transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.-moz-transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.-o-transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.-ms-transform = "translate3d(-239px, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "in_fn()");
}
</script>

<div id="test" style="
            width: 200px;
            height: 200px;
            background: #000;
            transform: translate3d(-239px, 0px, 0px);
            -webkit-transform: translate3d(-239px, 0px, 0px);">
</div>

<div id="menu-button" onclick="in_fn()">CLIKC HERE</div>

https://jsfiddle.net/dq0efpv1/1/

如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、-moz-transform 、-o-transform 和 -ms-transform css？

最好的问候

Answer 1

使用WebkitTransform、MozTransform、OTransform、msTransform

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript">
  function in_fn() {
    document.getElementById("test").style.transform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.WebkitTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.MozTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.OTransform = "translate3d(0, 0, 0)";
    document.getElementById("test").style.msTransform = "translate3d(0, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "out_fn()");
  }

  function out_fn() {
    document.getElementById("test").style.transform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.WebkitTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.MozTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.OTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("test").style.msTransform = "translate3d(-239px, 0, 0)";
    document.getElementById("menu-button").setAttribute("onclick", "in_fn()");
  }
</script>

<div id="test" style="width: 200px;height: 200px;background: #000;transform: translate3d(-239px, 0px, 0px);-webkit-transform: translate3d(-239px, 0px, 0px);">
</div>

<div id="menu-button" onclick="in_fn()">CLIKC HERE</div>