JavaScript로 CSS를 추가 하시겠습니까?
자바 스크립트 파일의 문자열에서 자바 스크립트를 사용하여 문서의 헤드에 CSS를 추가하는 방법이 있습니까?
라이트 박스 스크립트가있는 웹 페이지가 있다고 가정 해 보겠습니다.이 스크립트가 작동하려면 CSS 파일이 필요합니다.
이제이 css 파일을 추가하면 <link>js가 활성화되지 않은 사람들에게도 css 파일이 다운로드됩니다.
스크립트를 사용하여 CSS 파일을 동적으로로드 할 수 있다는 것을 알고 있지만 이는 또한 2 개의 http 요청이 있음을 의미하며 파일에 CSS가 거의 또는 전혀없는 경우이 비효율적이라고 생각합니다.
그래서 저는 여러분이 CSS 파일에있는 CSS를 스크립트에 넣고 스크립트가 CSS를 파싱하여 헤드에 추가하도록 할 수 있다면 어떨까요? 아니면 스크립트가 CSS를 직접 추가하도록하면 어떨까요? <head>문서.
그러나 이것이 가능하다는 것을 온라인에서 찾지 못했습니다. 그래서 js로 머리에 CSS를 추가 할 수 있습니까?
편집 + 솔루션 :
크로스 브라우저 작업에 대한 roryf의 답변을 편집했습니다 (IE5 제외)
자바 스크립트 :
function addcss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
if (s.styleSheet) { // IE
s.styleSheet.cssText = css;
} else { // the world
s.appendChild(document.createTextNode(css));
}
head.appendChild(s);
}
<head>JavaScript 로 CSS 문자열을 추가하려고 할 때 ? CSS 문자열을 페이지에 삽입하면 <link>요소보다 요소 를 사용하는 것이 더 쉽습니다 <style>.
다음 p { color: green; }은 페이지에 규칙을 추가 합니다.
<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />
CSS 문자열을 URL 인코딩하고 HREF속성을 추가하여 JavaScript에서 간단하게 만들 수 있습니다 . <style>요소의 모든 특성 이나 스타일 시트에 직접 액세스 하는 것보다 훨씬 간단 합니다.
var linkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));
이것은 IE 5.5 이상에서 작동합니다.
표시 한 솔루션이 작동하지만이 솔루션은 더 적은 dom 작업과 단일 요소 만 필요합니다.
자바 스크립트 라이브러리에 의존하고 싶지 않다면 태그로 document.write()묶인 필수 CSS를 style문서에 직접 뱉어내는 데 사용할 수 있습니다 head.
<head>
<script type="text/javascript">
document.write("<style>body { background-color:#000 }</style>");
</script>
# other stuff..
</head>
이렇게하면 추가 HTTP 요청이 발생하지 않습니다.
제안 / 추가 / 제거 된 다른 솔루션이 있지만 이미 크로스 브라우저에서 제대로 작동하는 것을 과도하게 복잡하게 만드는 데는 아무런 의미가 없습니다. 행운을 빕니다!
편집 : Atspulgs 의견이 제안했듯이 querySelector를 사용하여 jQuery 없이도 동일한 결과를 얻을 수 있습니다 .
document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';
아래의 이전 답변.
jQuery 라이브러리를 사용하여 다음과 같은 방식으로 head 요소를 선택하고 HTML을 추가 할 수 있습니다.
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
여기 에서이 문제에 대한 전체 자습서를 찾을 수 있습니다.
IE에 대한 약간의 해킹이 있지만 간단한 비 jQuery 솔루션 :
var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}";
var htmlDiv = document.createElement('div');
htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>';
document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);
IE는 설정을 허용하지 않는 것 innerText, innerHTML또는 사용 appendChild에 style요소. 여기입니다 버그를보고 내가 잘못 문제를 식별 생각하지만,이 방법을 보여줍니다. 위의 해결 방법은 버그 보고서의 주석에서 가져온 것이며 IE6 및 IE9에서 테스트되었습니다.
이것을 사용하든 document.write 또는 더 복잡한 솔루션은 실제로 상황에 따라 다릅니다.
다음은 모든 주요 브라우저에서 CSS 규칙을 동적으로 생성하는 함수입니다. createCssRule선택기 (예 : "p.purpleText"), 규칙 (예 : "color : purple;") 및 선택적으로 a Document(기본적으로 현재 문서가 사용됨)를 사용합니다.
var addRule;
if (typeof document.styleSheets != "undefined" && document.styleSheets) {
addRule = function(selector, rule) {
var styleSheets = document.styleSheets, styleSheet;
if (styleSheets && styleSheets.length) {
styleSheet = styleSheets[styleSheets.length - 1];
if (styleSheet.addRule) {
styleSheet.addRule(selector, rule)
} else if (typeof styleSheet.cssText == "string") {
styleSheet.cssText = selector + " {" + rule + "}";
} else if (styleSheet.insertRule && styleSheet.cssRules) {
styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length);
}
}
}
} else {
addRule = function(selector, rule, el, doc) {
el.appendChild(doc.createTextNode(selector + " {" + rule + "}"));
};
}
function createCssRule(selector, rule, doc) {
doc = doc || document;
var head = doc.getElementsByTagName("head")[0];
if (head && addRule) {
var styleEl = doc.createElement("style");
styleEl.type = "text/css";
styleEl.media = "screen";
head.appendChild(styleEl);
addRule(selector, rule, styleEl, doc);
styleEl = null;
}
};
createCssRule("body", "background-color: purple;");
여기에 간단한 방법이 있습니다.
/**
* Add css to the document
* @param {string} css
*/
function addCssToDocument(css){
var style = document.createElement('style')
style.innerText = css
document.head.appendChild(style)
}
참고URL : https://stackoverflow.com/questions/3922139/add-css-to-head-with-javascript
'Program Tip' 카테고리의 다른 글
| localstorage (또는 다른 곳)에서 ES6 맵을 유지하려면 어떻게해야합니까? (0) | 2020.12.01 |
|---|---|
| pylint logging-not-lazy를 수정하는 방법은 무엇입니까? (0) | 2020.12.01 |
| 내 빌드 서버의 배포 패키지에 추가 어셈블리가있는 이유는 무엇입니까? (0) | 2020.12.01 |
| 회귀 계수 값 추출 (0) | 2020.12.01 |
| HTML5 동적으로 캔버스 만들기 (0) | 2020.12.01 |