如何为使用 JavaScript 创建的图像设置样式答案

【问题标题】：How to style an image created using javaScript如何为使用 JavaScript 创建的图像设置样式
【发布时间】：2016-11-14 15:41:35
【问题描述】：

感谢 Stack Overflow，我设法通过使用 javaScript 预加载图像来解决我遇到的过渡不一致的问题。

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

HTML

<div class="page page-1"><img src="myFirstImage.jpg" width="100%"></div>
<div id="myDiv"class="page page-2"></div>

CSS

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: block;

}

.page img {
   min-height: 100%;
}

 .pt-page-moveFromTop {
        -webkit-animation: moveFromTop 2s ease both;
        animation: moveFromTop 2s ease both;
    }

.pt-page-moveToBottom {
    -webkit-animation: moveToBottom 2s ease both;
    animation: moveToBottom 2s ease both;
}


@keyframes moveFromTop {
    from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
    from { }
    to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}

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");

但这并没有做到。实现这一目标的最佳方法是什么？感谢您的宝贵时间。

【问题讨论】：

在css文件.page.page-2 img {...}

标签： javascript jquery html css image

【解决方案1】：

您在这里混合使用 javascript 和 jquery。 add 类函数仅适用于 jquery 元素。

你应该做类似$(image2).addClass("page page-2");的事情

【讨论】：

【解决方案2】：

自从你使用了

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

那么我猜你可能想要使用纯 JS 解决方案直到最后。然后，您可以使用以下方式分配图像类：

image2.className = "className";

或者像这样添加另一个类名：

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

【讨论】：

【解决方案3】：

$('.page-2').addClass('pt-page-moveFromTop'); 将类添加到 img container，而不是 img 本身。你应该改用$('.page-2 img').addClass('pt-page-moveFromTop');。

【讨论】：