如何樣式創建使用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

回答

相關問題