Question

我想动态地将div id从html传递给js脚本因此，div id r1，r2，r3需要传入jS中的getElementById()，因此当用户将鼠标悬停在任何div上时，它将自动旋转。

这是我的第一个问题，如果有任何建议的修改是受欢迎的！

 <tbody>
           <tr>
        <td id="r1"> Roboust</td> 
        <td id="r2">Dynamic</td> 
        <td id="r3">Adhere</td>

        </tr>
        <tr>
         <td id="r4">Popular</td> 
         <td id="r5">Trending</td> 
         <td id="r6">Favourite</td>
        </tr>
        <tr>
         <td id="r7">Famous</td> 
         <td id="r8">Blockbouster</td>
         <td id="r9">Navie</td>
        </tr>
       </tbody>
   </table>
<h1>CLICK ON BUTTONS TO ROTATE THE BUTTON AS YOU WANT THEM</h1>
<button onclick="rotate() ">Flip Row1</button>

<script>

var rotate = function() {
document.getElementById('r1').style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
}
</script>
</body>

Answer 1

编辑我的回答

＆＃13;

 
<html>
<body>
    <table>
        <tbody>
            <tr>
                <td id="r1" onmouseover="rotate(this)"> Roboust</td> 
                <td id="r2" onmouseover="rotate(this)">Dynamic</td> 
                <td id="r3" onmouseover="rotate(this)">Adhere</td>
            </tr>
            <tr>
                <td id="r4" onmouseover="rotate(this)">Popular</td> 
                <td id="r5" onmouseover="rotate(this)">Trending</td> 
                <td id="r6" onmouseover="rotate(this)">Favourite</td>
            </tr>
            <tr>
                <td id="r7" onmouseover="rotate(this)">Famous</td> 
                <td id="r8" onmouseover="rotate(this)">Blockbouster</td>
                <td id="r9" onmouseover="rotate(this)">Navie</td>
            </tr>
        </tbody>
   </table>

<script>
    var rotate = function(x) {
        if(x.className == "rotated"){
            x.style="transform:rotateX(0deg);transition: 0.6s;transform-style:preserve-3d";
            x.className = "";
        }
        else{
            x.style="transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
            x.className = "rotated";
        }
    }
</script>
</body>
</html>

＆＃13;

Answer 2

你有几个错误试试这个

      <table>
               <tr>
            <td id="r1" onmouseover="rota(r1)"> Roboust</td> 
            <td id="r2" onmouseover="rota(r2)">Dynamic</td> 
            <td id="r3" onmouseover="rota(r3)">Adhere</td>
            </tr>

       </table>



        <script>

        function rota(i) {
        var x = document.getElementById(i);
        x.style.transform="rotateX(180deg)";
        x.style.transition='0.6s';
        }
        </script>
        </body>

Answer 3

您也可以尝试这种方式 -

<table id="myTable">
    <tbody>
        <tr>
            <td id="r1"> Roboust</td>
            <td id="r2">Dynamic</td>
            <td id="r3">Adhere</td>

        </tr>
        <tr>
            <td id="r4">Popular</td>
            <td id="r5">Trending</td>
            <td id="r6">Favourite</td>
        </tr>
        <tr>
            <td id="r7">Famous</td>
            <td id="r8">Blockbouster</td>
            <td id="r9">Navie</td>
        </tr>
    </tbody>
</table>

<script>
    document.getElementById('myTable').onmouseover = function(event) {
        if (event.target.tagName.toUpperCase() == "TD") {
            event.target.style = "transform:rotateX(180deg);transition: 0.6s;transform-style:preserve-3d";
        }
    }
</script>

如何将html div id动态传递给js函数

3 个答案: