Question

如何使用javascript by id？

更改元素中的-webkit-transform , -moz-transform , -o-transform and -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 and -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 by id？

在元素中更改-webkit-transform , -moz-transform , -o-transform and -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>

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

1 个答案: