如何使用 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？
最好的问候
最佳答案
使用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 - 如何使用 javascript 通过 id 更改元素中的 -webkit-transform 、 -moz-transform 、 -o-transform 和 -ms-transform css？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44041076/