如何设置使用javaScript创建的图像的样式

多亏了堆栈溢出，我通过使用javaScript预加载一个图像，成功地解决了不一致转换的问题

---

为了跳过正在运行的代码，我不会发布所有代码。简言之，我的HTML上有一个图像和一个按钮，当单击该按钮时，会触发一个转换，其中另一个图像会以向下滑动的方式取代它。通过在javascript中创建img，我得到的不一致性得到了解决（因为这样加载速度更快）。然后我应用一些执行转换的类。以下是相关代码：

HTML

javaScript

var image2 = new Image(); 

image2.src = "mySecondImg.jpg";

$(document).ready( function () {

   $('.myButton').click(function(){

       $('.page-1').addClass('pt-page-moveToBottom');
       $('.page-2').append(image2);
       $('.page-2').addClass('pt-page-moveFromTop');

    });  
});

这一切都是可行的，但我的第二张图片并没有使用“page”和“page-2”类来设置样式。所以我的问题是，如何将这些样式应用于我在js中创建的image（）。我试过类似的方法

image2.addClass("page page-2");

---

但那不行。实现这一目标的最佳方式是什么？谢谢您的时间。

您在这里混合了javascript和jquery。add class函数只能与jquery元素一起使用

您应该做一些事情，比如

$（image2）.addClass（“page-2”）
$（'.page-2'）.addClass（'pt-page-moveFromTop'）将类添加到img容器中，而不是img
本身。您应该执行
$（'.page-2 img'）.addClass（'pt-page-moveFromTop'）。
因为您使用了

var image2 = new Image(); 
image2.src = "mySecondImg.jpg";

那么我想你可能会一直使用纯JS解决方案。然后，可以使用以下命令指定图像类：

image2.className = "className";

或者添加另一个类名，如下所示：

image2.className += " className"; //with a space before

在css文件.page.page-2 img{…}
image2.className = "className";

image2.className += " className"; //with a space before