1

我正在尝试使用 onclick 事件处理程序使带有 id 图像的 img 旋转,以使用我的函数中的代码,该代码通过 ID 抓取图像分配一个变量名,然后使用该变量名进行旋转。我不确定我的代码在哪里出错。

   <section id="middle">
    <img id="image" src="images/flower.png" >   
    <button onclick="myFunction()">Click me</button>
    </section>

MyFunction(){
var img = document.getElementById("image");
img.rotate(20*Math.PI/180);
}
4

2 回答 2

1

您可以使用 CSS 自己进行旋转:

.rotated-image {
  -webkit-transform: rotate(20deg);
          transform: rotate(20deg);
}

在 html 上:

<section id="middle">
    <img id="image" src="images/flower.png" >   
    <button onclick="myFunction()">Click me</button>
</section>

然后,在 javascript 上,只需添加类:

function myFunction() {
  var img = document.getElementById("image");
  img.setAttribute("class", "rotated-image");
}

查看结果:http: //jsbin.com/ibEmUFI/2/edit

于 2013-11-05T22:07:24.103 回答
0

尝试使用带有 id 的 div 作为选择器:

<div id='image'><img src="images/flower.png" /></div>

 and 

var img = document.getElementById("image").getElementsByTagName('img');

值得一试!

于 2013-11-05T22:07:51.477 回答