CSS в тегах стиля с jQuery

Question

Я хотел бы спросить, есть ли способ установить код css в стиле < style> </style, используя jQuery. Мне нужно это особенно для размещения @keyframes, которые нельзя добавлять в элемент, но в стиле <> </style>.

Answer 1

Посмотрите на этот простой пример, где вы можете поменять цвет текста с красного на синий.

Вы просто используете селектор, чтобы захватить элемент, который вы хотите изменить с помощью css.

$("button").click(function() 
 
{ 
 
    $("span").css("color","blue"); 
 
});

span 
 
{ 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <span> a simple test </span> 
 
    <button> click me </button> 
 
</div>

Я думаю, что для ключевых кадров можно использовать следующее:

$.keyframe.define([{ 
    name: 'myfirst', 
     '0%': {top:$("#test").innerHeight()*-1; left:0px}, 
     '50%': {top:100%, left:0px}, 
     '100%': {top:$("#test").innerHeight()*-1; left:0px} 
}]); 

Это базируется на следующий ответ от подобного вопроса на SO Using JQuery to set CSS Keyframe

Использует этот пакет JQuery e для решения вопроса https://github.com/jQueryKeyframes/jQuery.Keyframes