Javascript를 사용하여 CSS 스타일 시트를 HTML 페이지로 가져올 수 있습니까? 그렇다면 어떻게 할 수 있습니까?
추신 : 자바 스크립트는 내 사이트에서 호스팅되지만 사용자가 <head>웹 사이트 의 태그 를 넣을 수 있기를 원하며 내 서버에서 호스팅 된 CSS 파일을 현재 웹 페이지로 가져올 수 있어야합니다. (css 파일과 javascript 파일 모두 내 서버에서 호스팅됩니다).
답변
여기에 “오래된 학교”방식이 있습니다. 모든 브라우저에서 잘 작동합니다. 이론적으로, setAttribute불행히도 IE6는 일관되게 지원하지 않습니다.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.com/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
이 예제는 CSS가 이미 추가되었는지 확인하여 한 번만 추가합니다.
해당 코드를 자바 스크립트 파일에 넣고 최종 사용자가 단순히 자바 스크립트를 포함하도록하고 CSS 경로가 절대 서버에로드되도록하십시오.
바닐라 JS
다음은 일반 자바 스크립트를 사용 head하여 URL의 파일 이름 부분을 기반으로 요소에 CSS 링크를 삽입하는 예입니다 .
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
닫는 head태그 바로 앞에 코드를 삽입하면 페이지가 렌더링되기 전에 CSS가로드됩니다. 외부 JavaScript ( .js) 파일을 사용하면 스타일이 지정되지 않은 콘텐츠 ( FOUC ) 의 플래시 가 나타납니다.
답변
jquery를 사용하는 경우 :
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');답변
이 스크립트와 같은 것이 가능하다고 생각합니다.
<script type="text/javascript" src="/js/styles.js"></script>이 JS 파일에는 다음 명령문이 포함되어 있습니다.
if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/versions4.css">');자바 스크립트와 CSS의 주소는 사이트를 참조하려면 절대적이어야합니다.
이 “분지 기술을 사용하여 CSS 해킹을 거부” 기사 에서 많은 CSS 가져 오기 기술에 대해 설명 합니다.
그러나 “JavaScript를 사용하여 포틀릿 CSS 스타일 시트를 동적으로 추가” 기사에는 CreateStyleSheet 가능성 (IE의 독점적 방법)도 언급되어 있습니다.
<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
}
else {
var styles = "@import url(' http://server/stylesheet.css ');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>
답변
Element.insertAdjacentHTML 은 브라우저를 매우 잘 지원하며 한 줄에 스타일 시트를 추가 할 수 있습니다.
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
답변
스타일 자체가로드 될 때까지 알고 (또는 기다리려면) 다음과 같이 작동합니다.
// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)
let fetchStyle = function(url) {
return new Promise((resolve, reject) => {
let link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.onload = function() { resolve(); console.log('style has loaded'); };
link.href = url;
let headScript = document.querySelector('script');
headScript.parentNode.insertBefore(link, headScript);
});
};
답변
나는 이것이 꽤 오래된 실이라는 것을 알고 있지만 여기 5 센트가 온다.
필요에 따라 다른 방법으로이를 수행 할 수 있습니다.
CSS 파일을 잠시 동안 만 활성화하려는 경우가 있습니다. CSS 전환처럼. CSS를 활성화 한 다음 다른 이벤트 후에이를 비활성화하십시오.
CSS를 동적으로로드 한 다음 제거하는 대신 새 CSS의 모든 요소 앞에 클래스 / ID를 추가 한 다음 CSS 기본 노드의 해당 클래스 / ID를 body 태그와 같이 전환하면됩니다.
이 솔루션을 사용하면 처음에 더 많은 CSS 파일이로드되지만 CSS 레이아웃을 전환하는보다 역동적 인 방법이 있습니다.
답변
최신 브라우저에서는 다음 promise과 같이 사용할 수 있습니다 . 약속이있는 로더 함수를 작성하십시오.
function LoadCSS( cssURL ) {
// 'cssURL' is the stylesheet's URL, i.e. /css/styles.css
return new Promise( function( resolve, reject ) {
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.href = cssURL;
document.head.appendChild( link );
link.onload = function() {
resolve();
console.log( 'CSS has loaded!' );
};
} );
}
그런 다음 CSS 가로 드 된 후에 무언가를 원합니다. CSS가 다음과 같이로드 된 후에 실행해야하는 함수를 호출 할 수 있습니다.
LoadCSS( 'css/styles.css' ).then( function() {
console.log( 'Another function is triggered after CSS had been loaded.' );
return DoAfterCSSHasLoaded();
} );
작동 방식을 심층적으로 이해하려는 경우 유용한 링크 :
