时间戳

首页 > 解决方案 > 如何旋转任意角度的图像

javascript - 如何旋转任意角度的图像

问题描述

我想将图像旋转 N 度我写了这段代码但它不起作用我该怎么办？

var N=20
    function rotateImage() {
        var img = document.getElementById('myimage');
        img.style.transform = 'rotate(Ndeg)';

    }

和 

img.style.transform = 'rotate(${N}deg)';

不起作用，但 img.style.transform = 'rotate(20deg)'; 作品

标签： javascript

解决方案

您需要将变量实际放入字符串中。您可以使用模板文字（注意反引号，而不是单引号），如下所示：

img.style.transform = `rotate(${N}deg)`;

或者，连接字符串：

img.style.transform = 'rotate(' + N + 'deg)';

另外，我会重构您的代码以将 N 作为参数：

function rotateImage(N) {
    var img = document.getElementById('myimage');
    img.style.transform = 'rotate(' + N + ')';

}
rotateImage(20);

或者，如果它真的总是 20 度：

function rotateImage() {
    document.getElementById('myimage').style.transform = 'rotate(20deg)';
}

推荐阅读