WebKit (Safari/Chrome)에서 CSS 규칙을 동적으로로드하려면 어떻게합니까?

StackOverflow https://stackoverflow.com/questions/351633

  •  20-08-2019
  •  | 
  •  

문제

WebKit (Safari 및 Chrome)에는 현재 HTML을 DIV에 동적으로로드하려고했기 때문에 HTML에는 CSS 규칙 (...)이 포함되어 있습니다. HTML에 스타일 정의가로드되지 않은 후 (SO 시각적으로 나는 스타일이 없다고 말할 수 있으며, JavaScript로 검색하면 스타일이 없습니다). jQuery 플러그인 TocsSrule ()을 사용해 보았지만 작동하지만 너무 느립니다. WebKit이 스타일을 동적으로로드하는 또 다른 방법이 있습니까? 감사. 패트릭

도움이 되었습니까?

해결책

문서의 헤드에 "링크"태그를 추가하는 것이 더 나은 관행이라고 생각합니다. 가능하지 않으면 "스타일"태그를 머리에 추가하십시오. 스타일 태그는 신체에있어서는 안됩니다 (검증되지 않음).

링크 태그 추가 :

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);

다른 팁

스트레이트 업 jQuery Way (크롬을 포함한 주요 브라우저에서 작동) : http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javavascript-and-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 way (모두 하나의 텍스트 문자열)를 수행하면 실패합니다 (CSS가로드되지 않음).

그런 다음 $ ( 'Head'). Append (CSSLINK)로 머리에 추가하십시오.

감사합니다 Vatos, 당신은 나에게 좋은 리드를 주었다. 기본적으로 나는 당신이 제안한 것을했지만 jQuery를 사용하여 HTML을 설정하고 머리에 새로운 스타일을 추가했기 때문에, Safari/Chrome은 InnerHTML을 수행 할 때 마구간이 멈췄다. 내 코드는 다음과 같이 끝났습니다

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

나. Andrei Cimpoca의 결과에 투표 할 포인트가 충분하지 않지만 그 솔루션이 여기에서 가장 좋습니다.

style.innerhtml = "..."; WebKit Engines 또는 IE에서는 작동하지 않습니다.

CSS 텍스트를 올바르게 주입하려면 다음을 수행해야합니다.

style.stylesheet.csstext = "..."; IE를 위해.

그리고

style.appendChild (document.createtextNode ( "...")); WebKit의 경우.

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

나는 그것이 오래된 주제라는 것을 알고 있지만 누군가가 혜택을 줄 것이라고 생각했습니다. 나도 내 페이지에 CSS를 동적으로로드해야했습니다 (포함 된 "구성 요소"템플릿에 따라 모든 것이 렌더링되기 전에 :

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

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

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

나는 한 줄 접근법을 사용하여 문서를 추가하려고 시도했습니다. 즉, IE 10과 Chrome에서 일했지만 Safari에서는 작동하지 않았습니다. 위의 접근 방식은 3 개 모두에서 작동했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top