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

我想将div id从html动态传递给js脚本因为div id r1，r2，r3需要传入jS中的getElementById()，所以当用户鼠标放在任何div上，它会自动旋转。如何将html div id的动态传递给js函数

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

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

来源

2016-02-23 Prasad_Joshi

ü想使用javascript设置id – Transformer

@Transformer是的......但它不起作用，我实际上想要对您的更正做什么。 –

编辑我的回答


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

来源

2016-02-23 08:51:51

我试着用这个，但它隐藏了除第一个以外的所有其他td id。 –

编辑我的回答 –

太棒了！谢谢..那种工作..但只有一件事..我们可以反过来再次使用鼠标..并重复这个每个鼠标过了！ –

你有几个错误尝试这样

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

来源

2016-02-23 08:53:29 mohade

你的解决方案似乎工作，但它不会传递id作为rota（i）function.it中的参数给我一个错误，如明智的“x是null” –

您也可以尝试这种方式 -

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

来源

2016-02-23 09:49:20 jaibatrik

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

回答

相关问题