Question

我正在尝试使用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);
}

Answer 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

Answer 2

尝试使用id作为选择器的div：

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

 and 

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

值得一试！

JavaScript：点击时旋转图片

2 个答案: