В настоящее время у меня есть проблемы в Webkit (Safari и Chrome), когда я пытаюсь динамически загрузить (innerHTML) некоторый html в div, html содержит правила css (...), после рендеринга html определения стилей не загружаются (поэтому визуально я могу сказать, что стилей нет, а также, если я ищу их с помощью javascript, стили не найдены). Я пробовал использовать плагин jquery tocssRule(), он работает, но слишком медленно. Есть ли другой способ заставить webkit динамически загружать стили? Спасибо. Патрик
Как динамически загружать правила css в Webkit (Safari/Chrome)?
Ответы (8)
Я думаю, что лучше добавить тег «ссылка» к заголовку вашего документа. Если это невозможно, попробуйте добавить к заголовку тег «стиль». Теги стиля не должны быть в теле (даже не проверяются).
Добавить тег ссылки:
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);
innerHTML
не считается устаревшим.
- person felixfbecker; 27.11.2020
Прямой способ 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.
Самый простой способ (с использованием 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);
Спасибо, Ватос, вы дали мне хорошее руководство, в основном я сделал то, что вы предложили, но использовал 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);
мех. У меня недостаточно баллов, чтобы проголосовать за результат Андрея Чимпоки, но это решение здесь лучшее.
style.innerHTML = "..."; не работает в двигателях webkit или т.е.
Чтобы правильно внедрить текст css, вы должны:
style.styleSheet.cssText = "..."; для т.е.
и
style.appendChild(document.createTextNode("...")); для вебкита.
Firefox также будет работать со вторым вариантом или с style.innerHTML = "...";
Вот концерт. То, что сказал Патрик, не сработало для меня. Вот как я это сделал.
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 устарел и не должен использоваться для таких целей. Кроме того, это медленнее тоже.
Помимо приведенных выше версий, основанных на тегах стиля, вы также можете добавлять стили напрямую с помощью 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
document.querySelector('#x').style.sheet
не определено.
- person Vitaly Zdanevich; 14.06.2018
Я знаю, что это старая тема, но подумал, что кому-то будет полезно. Мне тоже нужно было динамически загружать 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.