Как загрузить CSS с помощью jquery - PullRequest
Новая
       1

Как загрузить CSS с помощью jquery

51 голосов
/ 12 октября 2010

Я загрузил файл css на сервер, поэтому у меня есть URL-адрес.Как я могу загрузить его в свой Perl-код, используя JQuery?

Так что в настоящее время я жестко программирую CSS на моей странице масона, которая отсутствует на странице, что-то подобноеизбежать жесткого кодирования этого CSS?

Ответы [ 4 ]

75 голосов
/ 12 октября 2010

Не понимаю, почему вы не можете просто вставить элемент <link/> в раздел <head/>, а вот фрагмент кода jQuery: 

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
39 голосов
/ 15 августа 2013

Опять же, в соответствии с Динамическая загрузка таблицы стилей CSS не работает в IE .

Вам необходимо установить атрибут href attr последним и только после добавления элемента link к заголовку:

$('<link>')
  .appendTo('head')
  .attr({
      type: 'text/css', 
      rel: 'stylesheet',
      href: '/css/your_css_file.css'
  });
0 голосов
/ 22 марта 2019

Мне нравится быть последовательным в отношении языка и типа файла (например: не смешивайте CSS с HTML). Поэтому я хотел бы создать файл style.css и загрузить его в тег с помощью jQuery.

index.html 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div>
        <style id="import"></style>
        <h2 class="red">this is red</h2>
    </div>
    <script type="text/javascript">
        $( document ).ready(function() {
            $( "#import" ).load( "./style.css" );
        });
    </script>
</body>
</html>

style.css 

.red{
    color: red;
}
0 голосов
/ 22 марта 2019 
$(document).ready(function(){
    console.log("ready!");
var e=$("<link>",{
    rel:"stylesheet",
    type:"text/css",
    href:"/your/css/file.css"})[0];
e.onload=function(){
console.log("CSS IN IFRAME LOADED")},
document.getElementsByTagName("head")[0].
appendChild(e)});
...