Javascript를 사용하여 CSS 파일을 로드하는 방법은 무엇입니까?
Javascript를 사용하여 css 스타일시트를 html 페이지로 Import할 수 있습니까?그렇다면 어떻게 해야 할까요?
는 제, 가 p.s javascript를 수 .<head> Import (.)(css ascript javascript ascript 、 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.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
이 예에서는 CSS가 이미 추가되었는지 여부를 확인하고 CSS를 1회만 추가합니다.
이 코드를 JavaScript 파일에 삽입하여 최종 사용자에게 JavaScript를 포함시키고 CSS 경로가 절대 경로인지 확인하여 서버에서 로드되도록 합니다.
바닐라JS
JavaScript를 를 JavaScript에 .headURL:
<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사용(「JavaScript」).js) 파일을 사용하면 Flash of Unstyled Content(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="/css/versions4.css">');
javascript와 css의 주소는 당신의 사이트를 참조하려면 절대적이어야 합니다.
많은 CSS Import 기술에 대해서는 이 "Say no to CSS hacks with branching technologies"에서 설명하고 있습니다.
그러나 "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.insert인접HTML은 브라우저를 매우 잘 지원하므로 한 줄에 스타일시트를 추가할 수 있습니다.
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);
});
};
다음 코드 사용:
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);
에서는 「」를 사용할 수 .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();
} );
이 기능의 구조를 상세하게 이해하려면 , 다음의 링크를 참조해 주세요.
나는 이것이 꽤 오래된 실이라는 것을 알지만 내 5센트가 여기 있다.
당신의 요구에 따라 다른 방법이 있습니다.
css 파일을 잠시만 활성화 하고 싶은 경우가 있습니다.css 스위칭처럼요.css를 활성화한 후 다른 이벤트가 발생한 후 비활성화합니다.
css를 동적으로 로드한 후 삭제하는 것이 아니라 새로운 css의 모든 요소 앞에 클래스/id를 추가한 후 css의 기본 노드의 클래스/id(바디 태그 등)를 전환할 수 있습니다.
이 솔루션을 사용하면 처음에 로드된 css 파일이 많아지지만 보다 동적으로 css 레이아웃을 전환할 수 있습니다.
Promise에 대해 들어본 적 있나요?모든 최신 브라우저에서 작동하며 비교적 사용하기 쉽습니다.html 헤드에 css를 삽입하는 간단한 방법을 참조하십시오.
function loadStyle(src) {
return new Promise(function (resolve, reject) {
let link = document.createElement('link');
link.href = src;
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Style load error for ${src}`));
document.head.append(link);
});
}
다음과 같이 구현할 수 있습니다.
window.onload = function () {
loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
.then(() => loadStyle("css/style.css"))
.then(() => loadStyle("css/icomoon.css"))
.then(() => {
alert('All styles are loaded!');
}).catch(err => alert(err));
}
정말 멋있죠?Promise를 사용하여 스타일의 우선순위를 결정하는 방법입니다.
멀티 스타일 로딩 실장에 대해서는, https://stackoverflow.com/a/63936671/13720928 를 참조해 주세요.
css 및 JS 파일을 필요에 따라 동기화 및 비대칭하는 일반 jquery 플러그인이 있습니다.또, 이미 로드되고 있는 것을 추적합니다.http://code.google.com/p/rloader/ 를 참조해 주세요.
작성 설정 jQuery를 사용하는 onLoad:
var css = $("<link>", {
"rel" : "stylesheet",
"type" : "text/css",
"href" : "style.css"
})[0];
css.onload = function(){
console.log("CSS IN IFRAME LOADED");
};
document
.getElementsByTagName("head")[0]
.appendChild(css);
JS 및/또는 CSS를 로드하기 위해 사용하는 전체 코드 아래
function loadScript(directory, files){
var head = document.getElementsByTagName("head")[0]
var done = false
var extension = '.js'
for (var file of files){
var path = directory + file + extension
var script = document.createElement("script")
script.src = path
script.type = "text/javascript"
script.onload = script.onreadystatechange = function() {
if ( !done && (!this.readyState ||
this.readyState == "loaded" || this.readyState == "complete") ) {
done = true
script.onload = script.onreadystatechange = null // cleans up a little memory:
head.removeChild(script) // to avoid douple loading
}
};
head.appendChild(script)
done = false
}
}
function loadStyle(directory, files){
var head = document.getElementsByTagName("head")[0]
var extension = '.css'
for (var file of files){
var path = directory + file + extension
var link = document.createElement("link")
link.href = path
link.type = "text/css"
link.rel = "stylesheet"
head.appendChild(link)
}
}
(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();
(() => loadStyle('styles/', ['index'])) ();
다음으로 플레인 JavaScript를 사용하여 URL의 파일 이름 부분에 따라 헤드 요소에 CSS 링크를 삽입하는 예를 나타냅니다.
document.head.innerHTML += '<link rel="stylesheet" href="css/style.css">';
대부분의 브라우저가 지원합니다.브라우저 호환성을 참조하십시오.
이 YUI 라이브러리에서 를 사용하거나 이 문서를 사용하여
당신이 찾고 있는 것은 YUI 라이브러리일지도 모릅니다.도메인 간 로딩도 지원합니다.
jquery를 사용하는 경우 이 플러그인은 동일한 작업을 수행합니다.
css뿐만 아니라 모든 자산(js, css, images)을 로드하고 여러 파일에 대한 로드 이벤트를 처리하는 방법을 하나 더 공유하겠습니다.그건…async-assets-loader음음
<script src="https://unpkg.com/async-assets-loader"></script>
<script>
var jsfile = "https://code.jquery.com/jquery-3.4.1.min.js";
var cssfile = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
var imgfile = "https://logos.keycdn.com/keycdn-logo-black.png";
var assetsLoader = new asyncAssetsLoader();
assetsLoader.load([
{uri: jsfile, type: "script"},
{uri: cssfile, type: "style"},
{uri: imgfile, type: "img"}
], function () {
console.log("Assets are loaded");
console.log("Img width: " + assetsLoader.getLoadedTags()[imgfile].width);
});
</script>
async-assets-loader 문서에 따르면
var elem = document.createElement('link');
elem.rel = ' stylesheet'
elem.href= 'style.css';//Link of the css file
document.head.appendChild(elem);
var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")
저는 백일엽을 사용하고 있는데, 이것은 잘 작동합니다.감사합니다.
용도:
document.getElementById("of head/body tag")
.innerHTML += '<link rel="stylesheet" type="text/css" href="style.css">';
이 기능은 암기를 사용합니다.또한 동일한 스타일시트를 두 번 로드하고 실행하는 충돌 없이 여러 번 호출할 수 있습니다.또한 스타일시트가 실제로 로드되는 시점보다 빨리 해결되지 않습니다.
const loadStyle = function (src) {
let cache = [];
return function (src) {
return cache[src] || (cache[src] = new Promise((resolve, reject) => {
let s = document.createElement('link');
s.rel = 'stylesheet';
s.href = src;
s.onload = resolve;
s.onerror = reject;
document.head.append(s);
}));
}
}();
함수식 뒤에 괄호()가 있습니다.
스타일시트 병렬 로드:
Promise.all([
loadStyle('/style1.css'),
loadStyle('/style2.css'),
// ...
]).then(() => {
// do something
})
동적 로드 스크립트에 동일한 방법을 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
'programing' 카테고리의 다른 글
| argparse를 사용하여 목록을 명령줄 인수로 전달하려면 어떻게 해야 합니까? (0) | 2022.09.30 |
|---|---|
| javax.persistence를 사용할 수 있습니다.Query.getResultList()가 null을 반환하시겠습니까? (0) | 2022.09.30 |
| vue 구성 요소 내부에 외부 js를 포함하는 방법 (0) | 2022.09.30 |
| Python에서 어레이를 선언하려면 어떻게 해야 합니까? (0) | 2022.09.30 |
| mysql 각 행에 한 테이블의 데이터를 다른 테이블과 결합 (0) | 2022.09.30 |