如何将HTML div ID动态传递给js函数

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

编辑我的答案

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

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 个解决方案

解决方案1
1 已采纳 2016-02-23 08:51:51

解决方案2
0 2016-02-23 08:53:29

解决方案3
0 2016-02-23 09:49:20

如何将HTML div ID动态传递给js函数

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-02-23 08:51:51

解决方案2 0 2016-02-23 08:53:29

解决方案3 0 2016-02-23 09:49:20

解决方案1
1 已采纳 2016-02-23 08:51:51

解决方案2
0 2016-02-23 08:53:29

解决方案3
0 2016-02-23 09:49:20