Как динамически загружать правила CSS в Webkit (Safari / Chrome)?

Question

В настоящее время у меня есть проблемы в Webkit (Safari и Chrome), где я пытаюсь динамически загрузить (innerHTML) некоторый html в div, html содержит правила css (...), после того, как html будет обработан, определения стиля загружен (так что визуально я могу сказать, что стили отсутствуют, а также, если я ищу с помощью javascript для них, стили не найдены). Я попытался использовать плагин jquery tocssRule (), он работает, но это слишком медленно. Есть ли другой способ получить webkit для динамической загрузки стилей? Благодарю. Patrick

Answer 1

Я думаю, что лучше добавлять тег "ссылка" к заголовку вашего документа. Если это невозможно, попробуйте добавить тег «style» к голове. Теги стилей не должны быть в теле (даже не проверяются).

Добавить тег ссылки:

var link = document.createElement('link');

link.setAttribute('rel', 'stylesheet');

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

Добавить тег стиля:

var style = document.createElement('style');

style.innerHTML = 'body { background-color: #F00; }';

document.head.appendChild(style);

Answer 2

Простой способ jQuery (который работает в основных браузерах, включая Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

С сайта:

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

Примечание: пример также включает внедрение JS, которое можно игнорировать, если вы просто хотите вставить ссылку CSS.

Answer 3

Самый простой способ (используя jQuery, который есть) заключается в следующем:

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

Если вы сделаете это таким образом, то это будет работать в Safari. Если вы сделаете это обычным способом jQuery (все в одной текстовой строке), он потерпит неудачу (css не загрузится).

Затем вы просто добавляете его к голове с помощью $ ('head'). Append (cssLink);

Answer 4

Мех. У меня недостаточно очков, чтобы проголосовать за результат Андрея Чимпоки, но это лучшее решение здесь.

style.innerHTML = "..."; не работает в движках webkit или т.е.

Чтобы правильно ввести текст CSS, необходимо:

style.styleSheet.cssText = "..."; для т.е..

и

style.appendChild (document.createTextNode ( "...")); для веб-набора.

Firefox также будет работать со вторым параметром или с style.innerHTML = "...";

Answer 5

Вот концерт. То, что сказал Патрик, не сработало для меня. Вот как я это сделал.

    var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));

InnerHTML устарел и не должен использоваться для таких целей. Кроме того, он тоже медленнее.

Answer 6

Спасибо, Ватос, вы дали мне хорошее руководство, в основном я сделал то, что вы предложили, но использовал jquery, чтобы установить html и добавить новый стиль в заголовок, так как safari / chrome зависал при выполнении innerHTML, а document.head был не определен , Мой код закончил выглядеть так

var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);

Answer 7

Я знаю, что это старая тема, но подумал, что кому-то это будет полезно. Мне тоже нужно было динамически загружать css на мою страницу (до того, как все будет загружено, в соответствии с включенными шаблонными компонентами):

var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);

Я попытался добавить в document.head однострочный подход - работал в IE 10 и Chrome, но не в Safari. Подход выше работал во всех 3.

Answer 8

Помимо версий, основанных на тегах стилей, вы также можете напрямую добавлять стили с помощью javascript:

var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);

Преимущество заключается в возможности использовать переменные, не прибегая к cssText / innerHTML.

Имейте в виду, что в браузерах на основе webkit это может быть медленным, если вы вставляете много правил. Существует открытая ошибка, чтобы исправить эту проблему производительности в webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). До этого вы можете использовать теги стиля для массовых вставок.

Это стандартный способ вставки правил стилей в W3C, но он не поддерживается ни одной версией IE: http://www.quirksmode.org/dom/w3c_css.html