CODEWITHSUNDEEP
javascripthtmlcss
mongkon yapon
mongkon yapon

Reputation: 33

How to change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id?

How to change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id ?

This code, I change only transform css using javascript. And it's work good

<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/

But my code not work when i add -webkit-transform , -moz-transform , -o-transform and -ms-transform into javascript code

<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/

How can I do for change -webkit-transform , -moz-transform , -o-transform and -ms-transform css in element using javascript by id ?

Best regards

Upvotes: 3

Views: 1913

Answers (1)

guest271314
guest271314

Reputation: 1

Use 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>

Upvotes: 3

Related Questions