CSS-hack - Добавление css в тело веб-сайта

Я застрял в ситуации, когда у меня есть только доступ к телу веб-сайта, а не к голове. Мне нужно использовать новую таблицу стилей. Теперь решение, с которым я столкнулся, чтобы добавить файл CSS в тело веб-сайта. Конечно, это хак, поэтому мне было интересно, есть ли лучшее решение для него?

Ответ 1

Обычный способ загрузки внешних файлов CSS на странице:

<head>
  <link rel="stylesheet" type="text/css" href="file.css" />
</head>

Используя только JavaScript для этого, вы должны создать функцию Javascript:

 <script type="text/javascript">

    function loadCSS(filename){ 

       var file = document.createElement("link");
       file.setAttribute("rel", "stylesheet");
       file.setAttribute("type", "text/css");
       file.setAttribute("href", filename);
       document.head.appendChild(file);

    }


   //just call a function to load your CSS
   //this path should be relative your HTML location
   loadCSS("path_to_css/file.css");

</script>

Либо вы можете добавить динамические определения, например:

 <script type="text/javascript">
      var sheet = (function() {
        var style = document.createElement("style");
        style.appendChild(document.createTextNode(""));
        document.head.appendChild(style);
        return style.sheet;
      })();

      sheet.insertRule("span { visibility: hidden }", 1);
 </script>

Ответ 2

как насчет:

$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');

Ответ 3

Вы имеете в виду определение CSS снова и переопределить предыдущий CSS?:

<html>
    <head>
        <style type='text/css'>
            * {color:red;}
            p {background-color:yellow;}
        </style>
    </head>
    <body>
        <style type='text/css'>
            * {color:green;}
            p {background-color:black;}
        </style>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> 
    </body>   
</html>

Вы можете скопировать всю таблицу стилей или, конечно же, включить ее в php или javascript. Но вот, глядя на начальную таблицу стилей CSS и переопределяя все стили, появляющиеся там в теле, должны работать. Не уверен, что это чистое.

Ответ 4

Вы можете использовать метод @import url("your_styles.css");.

Если у вас есть доступ к таблицам стилей, которые вызывается в начале документа, вы можете добавить это в начало документа CSS.

Вы также можете попробовать добавить альтернативный <head> к своему документу, о котором я не советую, но если вам нужно это сделать, вы также можете сделать это:

<style type="text/css">
  @import url("your_style.css");
</style>

Если обратная совместимость не является для вас проблемой, есть также атрибут HTML5 scoped, который был рассмотрен в этом вопросе: Does <STYLE> должны находиться в <HEAD> HTML-документа?

Надеюсь, это поможет!

ИЗМЕНИТЬ:

Найдено две ссылки в отношении функции @import. Один из них - рабочий проект Центра разработчиков Mozilla, который был обновлен 31 июля 2012 года:

https://developer.mozilla.org/en-US/docs/CSS/@import

Также ссылка на сайт с ссылкой на статистику поддержки браузера:

http://reference.sitepoint.com/css/at-import

Я бы предположил, что это по-прежнему функциональная, полезная функция, когда это необходимо.

Ответ 5

Вы можете поместить теги <head></head> в свой раздел тела.

Ответ 6

По-видимому, это работает для меня, если это выглядит как

<link href="/main.css"  rel="stylesheet" type="text/css"  />

но нет, если он содержит /css в rel.

<link href="/main.css"  rel="stylesheet/css" type="text/css"  />

Просто испытал это сам, подумал о публикации этого, чтобы подчеркнуть эту ловушку.