javascriptから外部CSSを呼び出す方法は？

-1

私は外部のcss.Allで宣言しているjavascriptでアニメーションを適用したいと思います。私のHTML、CSS、javascriptは拡張子が.htmlの1つのファイルです。ここに私のコードです。javascriptから外部CSSを呼び出す方法は？

<html> 
<head> 

<style> 

@keyframes example { 

0% {background-color: red; transform:translate(0px,0px)rotate(180deg);} 
25% {background-color: green; transform:translate(0px,-150px);} 
50% {background-color: blue; transform:translate(0px,-300px);} 
75% {background-color: pink; transform:translate(0px,-455px);} 
100% {background-color: yellow; transform:translate(0px,0px);} 
} 

#1 
{ 
margin-top: 350px; 
margin-left: 1190px; 
animation-name: example; 
animation-duration: 4s; 
} 
</style> 

<script language="javascript"> 
function abc() 
    { 
    var a=document.getElementById("1"); 
    a.style.Animation-Name="example" ; // i have full doubt here css animation is not switching from here 
    } 
</head> 
<body> 
<a href="#" id="1" onclick="abc();" />onclick 
</body> 
</html>

出典

2017-02-27 rajpoot rana

あなたはこの '関数ABC（）{ するvar A =のdocument.getElementById（ "ID6"）を意味し、' .style.animationName' – j08691

＃1 j08691。 a.style.animationname = "example"; 'それは動作しません –

いいえ、' animationName'。大文字と小文字を区別。また、Webkitブラウザでこれをやっているのであれば、 'webkitAnimationName'が必要かもしれません。 – j08691

Hey Raj私はあなたの投稿を見ましたが、この回答にはいくつか変更しました。ウェブキットの追加は、ここに見つかりました：https://www.w3schools.com/css/css3_animations.asp。複数のブラウザをサポートします。

animate関数は、3項演算子を使用します。私はあなたのマージンのサイズを変更してアニメーションをよりよく追跡しました。

おそらくこの問題のためのより説得力のある解決策がありますが、これがあなたを助けてくれることを願っています！良い一日を。

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
    .standard.animate { 
     margin-top: 100px; 
     margin-left: 200px; 
     position: relative; 
     background-color: red; 
     -webkit-animation-name: example; 
     -webkit-animation-duration: 4s; 
     animation-name: example; 
     animation-duration: 4s; 
    } 

    @-webkit-keyframes example { 
    0% {background-color: red; transform:translate(0px,0px)rotate(180deg);} 
    25% {background-color: green; transform:translate(0px,-150px);} 
    50% {background-color: blue; transform:translate(0px,-300px);} 
    75% {background-color: pink; transform:translate(0px,-455px);} 
    100% {background-color: yellow; transform:translate(0px,0px);} 
} 

@keyframes example { 
    0% {background-color: red; transform:translate(0px,0px)rotate(180deg);} 
    25% {background-color: green; transform:translate(0px,-150px);} 
    50% {background-color: blue; transform:translate(0px,-300px);} 
    75% {background-color: pink; transform:translate(0px,-455px);} 
    100% {background-color: yellow; transform:translate(0px,0px);} 
} 
    </style> 
    </head> 
<body> 
    <div class="standard">on Click</div> 
    <script> 

    const animateDiv = document.querySelector('.standard'); 

    function animate() { 
     this.classList.contains('animate') ? this.classList.remove('animate') : 
     this.classList.add('animate'); 
    } 

    animateDiv.addEventListener('click', animate); 

    </script> 
    </body> 
</html>

出典

2017-02-28 01:54:39

javascriptから外部CSSを呼び出す方法は？

答えて

関連する問題