Question

我有一个html div，它首先有一个基本的css属性，但是当用户点击一个按钮时，我想在一行中更改该div的多个CSS属性

在下面，我想将多个css属性应用于图像＆＃34; MotionS＆＃34;只有当moveRight（）;在脚本本身中调用。

            <html>

             <head>
         <title>JavaScript Animation</title>

        <script type="text/javascript">

        var imgObj = null;
        var animate ;

        function init(){
           imgObj = document.getElementById('motionS');
           imgObj.style.position= 'relative'; 
           imgObj.style.left = '0px'; 
        }

        function moveRight(){
            document.getElementById('motionLess').style.visibility='hidden';
            document.getElementById('motionS').style.visibility="visible;height:50px;width:40px";

           imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
           animate = setTimeout(moveRight,200); // call moveRight in 20msec
        }

        function stop(){
           clearTimeout(animate);
           imgObj.style.left = '0px'; 
        }

        window.onload =init;

        </script>

         </head>

        <body>

        <form>
       <img id="motionLess" src="../Downloads/micky-steal.jpg" alt="micky-steal" style="height:120px;width:150px"/>
         <img id="motionS" style="visibility:hidden" src="../Downloads/leo_walk_cycle_take_two_by_luigil-d4oexx9.gif" alt= "micky-animated" style="height:10px;width:15px"/>
        <p>Click the buttons below to handle animation</p>
         <input type="button" value="Walk Micky" onclick="moveRight();" />
         <input type="button" value="Stop"   onclick="stop();" />
        </form>

        </body>
        </html>

Answer 1

你是说这个意思吗？

var main = document.getElementById("main");
main.style="border: 1px solid red; height: 100px;margin: 10px;"

<div id="main">

所以你只需要改变：

。
的document.getElementById（ '运动'）style.visibility = “可见;高度：50像素;宽度：40像素”;

到

。
的document.getElementById（ '运动'）式=“能见度：可见;高度：50像素;宽度：40像素“;

如何在JS中为html div应用多个CSS属性

1 个答案: