현재 Webkit (Safari 및 Chrome)에 문제가 있습니다. innerHTML을 div에 동적으로로드하려고했는데 HTML에 CSS 규칙이 포함되어 있습니다 (...). HTML이 렌더링되면 스타일 정의가로드되지 않습니다. (그래서 시각적으로 스타일은 거기에 없다고 말할 수 있고 또한 자바 스크립트로 스타일을 찾을 수 없다면). jquery 플러그인 tocssRule()을 사용해 보았지만 작동하지만 너무 느립니다. 스타일을 동적으로로드하는 웹킷을 얻는 또 다른 방법이 있습니까? 감사합니다. . PatrickWebkit (Safari/Chrome)에서 CSS 규칙을 동적으로로드하려면 어떻게해야합니까?
문서 머리 부분에 "링크"태그를 추가하는 것이 더 좋습니다. 그것이 가능하지 않다면 머리에 "스타일"태그를 추가하십시오. 스타일 태그는 본문에 있으면 안됩니다 (유효성 검사조차하지 않음).
추가] 링크 태그 :
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);
감사합니다 Vatos, 당신은 나에게 좋은 우위를 안겨주었습니다 기본적으로 당신이 제안하지만, HTML을 설정하는 jQuery를 무엇을 사용했고, 이후 innerHTML을 할 때 사파리/크롬이 멈추고 document.head가 정의되지 않았기 때문에 새 스타일을 머리에 추가하십시오. 내 코드는 여기에 공연의이
var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);처럼 보이는했다. 패트릭이 나에게 맞지 않는다고 말한 것. 여기 내가 어떻게 그랬어.
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은 더 이상 사용되지 않으며 이러한 용도로 사용해서는 안됩니다. 또한 속도도 느립니다.
var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");
당신이 그것을 다음 Safari에서 작동 그런 식으로 할 경우입니다 (jQuery를 사용하여)
간단한 방법은 다음과 같다. 일반 jQuery 방식 (모든 텍스트 문자열에서)을 수행하면 오류가 발생합니다 (CSS는로드되지 않습니다).
그러면 머리에 $ ('head')를 추가하면됩니다. append (cssLink); (주요 브라우저에서 작동 - 크롬 포함) 스트레이트 업
의 jQuery 방법 :
$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});
참고 :이 예제는 JS 주입 포함, 무시 될 수있는 사이트에서 http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/
CSS 참조를 삽입하기 만하면됩니다.
meh. 나는 Andrei Cimpoca의 결과에 투표하기에 충분한 점수가 없지만, 그 해결책이 여기에있는 최고의 해결책입니다.
style.innerHTML = "..."; ie 웹킷 엔진에서 작동하지 않습니다.
가 제대로 CSS 텍스트를 삽입하려면 다음을 수행해야합니다
style.styleSheet.cssText = "..."; 즉.
및
style.appendChild (document.createTextNode ("...")); 웹킷 용.
Firefox는 두 번째 옵션 또는 style.innerHTML = "..."과 함께 작동합니다.
위의 스타일 태그 기반 버전 외에, 당신은 또한 직접 자바 스크립트를 사용하여 스타일을 추가 할 수 있습니다
var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);
이것은 CSSText의/innerHTML을에 의존하지 않고도 변수를 사용할 수 있다는 장점이있다.
많은 규칙을 삽입하면 웹킷 기반 브라우저에서 속도가 느려질 수 있습니다. 웹킷 (https://bugs.webkit.org/show_bug.cgi?id=36303)에서이 성능 문제를 해결할 수있는 버그가 있습니다. 그때까지는 일괄 삽입에 스타일 태그를 사용할 수 있습니다.
이 스타일 규칙을 삽입하는 W3C 표준 방법이지만 IE의 모든 버전에서 지원하지 않는 : 나는 오래된 주제를 알고,하지만 누군가가 도움이 될 생각 http://www.quirksmode.org/dom/w3c_css.html
. 내가 너무 내 페이지에 동적으로 CSS를 읽어들이는 데 필요한 (모든 것이 포함 "구성 요소"템플릿에 따라, 온로드를 렌더링하기 전에) :
var oStyle = $("<style />");
oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");
$(document.head).append(oStyle);
- IE에서 근무 10 및 Chrome을 지원하지만 Safari에서는 지원되지 않습니다. 위의 방법은 모두 3에서 작동했습니다.
innerHTML은 사용되지 않는 방법이며 전혀 사용하지 않아야합니다. – karlcow
@karlcow 틀렸어. –
그래, 내가 왜 그걸 썼는지조차 모르겠다. 나는 내가 그것을 썼을 때 내가 생각하고 있었던 것을 기억하지 않는다. – karlcow