如何样式创建使用JavaScript

由于堆栈溢出的图像，我设法通过预加载使用Javascript的图像来解决我与不一致的转变有一个问题。跳过什么工作，我不会发布所有的代码。总之，我有我的HTML的图像和一个按钮，点击时触发该另一个图像取代它的位置有滑下的过渡。我得到的不一致通过在我的javascript中创建img来解决（因为它以更快的速度加载）。然后我应用一些执行转换的类。下面是相关代码：如何样式创建使用JavaScript

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

    }); 
});

它所有的作品，但我的第二图像不会与类风格“页面”和“页面-2”。所以我的问题是，如何将这些样式应用于我在js中创建的图像（）。我试过类似的东西

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

但是，这并没有做到这一点。什么是完成这个最好的方法？谢谢你的时间。

来源

2016-11-14 Paul

在CSS文件.page.page-2图{...} –

你在这里混合使用javascript和jquery。 add类函数只能用于jquery元素。

你应该做的成才一样$(image2).addClass("page page-2");

来源

2016-11-14 15:45:06 hairmot

$('.page-2').addClass('pt-page-moveFromTop');增加类的img 容器，不img本身。您应该改为$('.page-2 img').addClass('pt-page-moveFromTop');。

来源

2016-11-14 15:46:36 wscourge

既然你使用

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

那么我想你可能想使用纯JS的解决方案，直到结束。然后，您可以使用指定图像类：

image2.className = "className";

或添加其他类名是这样的：

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

来源

2016-11-14 17:03:27

如何样式创建使用JavaScript

回答

相关问题