<style>JavaScript를 사용하여 HTML 페이지에 태그 를 삽입하는 방법을 찾고 있습니다.
내가 지금까지 찾은 가장 좋은 방법 :
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);Firefox, Opera 및 Internet Explorer에서는 작동하지만 Chrome에서는 작동하지 않습니다. 또한 <br>IE의 앞에는 약간 추악합니다 .
누구나 <style>태그 를 만드는 방법을 알고 있습니까?
더 좋다
Chrome과 호환됩니까?
아니면
이것은 피해야 할 비표준 사항입니다.
세 가지 작동하는 브라우저가 훌륭하고 누가 Chrome을 사용합니까?
답변:
대신에 style요소를 추가 head하십시오 body.
이것은 IE (7-9), Firefox, Opera 및 Chrome에서 테스트되었습니다.
var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
head.appendChild(style);
style.type = 'text/css';
if (style.styleSheet){
// This is required for IE8 and below.
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}document.querySelector("head")않습니까? 그것은 소스에
querySelector(); 오늘은 document.headIE9부터 사용할 수 있습니다
style.styleSheet.cssText. 추가되기 전에는 style.styleSheetnull이었습니다.
IE 스타일 createStyleSheet()과 addRule()메소드를 가지고 있지 않은 브라우저에 IE 스타일 과 메소드를 추가하는 스크립트는 다음과 같습니다 .
if(typeof document.createStyleSheet === 'undefined') {
document.createStyleSheet = (function() {
function createStyleSheet(href) {
if(typeof href !== 'undefined') {
var element = document.createElement('link');
element.type = 'text/css';
element.rel = 'stylesheet';
element.href = href;
}
else {
var element = document.createElement('style');
element.type = 'text/css';
}
document.getElementsByTagName('head')[0].appendChild(element);
var sheet = document.styleSheets[document.styleSheets.length - 1];
if(typeof sheet.addRule === 'undefined')
sheet.addRule = addRule;
if(typeof sheet.removeRule === 'undefined')
sheet.removeRule = sheet.deleteRule;
return sheet;
}
function addRule(selectorText, cssText, index) {
if(typeof index === 'undefined')
index = this.cssRules.length;
this.insertRule(selectorText + ' {' + cssText + '}', index);
}
return createStyleSheet;
})();
}통해 외부 파일을 추가 할 수 있습니다
document.createStyleSheet('foo.css');를 통해 규칙을 동적으로 생성
var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');style태그와 태그 를 삽입하고 싶다고 가정하고 link(외부 CSS 참조) 다음 예제와 같습니다.
<html>
<head>
<title>Example Page</title>
</head>
<body>
<span>
This is styled dynamically via JavaScript.
</span>
</body>
<script type="text/javascript">
var styleNode = document.createElement('style');
styleNode.type = "text/css";
// browser detection (based on prototype.js)
if(!!(window.attachEvent && !window.opera)) {
styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
} else {
var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
styleNode.appendChild(styleText);
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
</script>
</html>또한 귀하의 질문에 귀하가 사용하고 있음을 알았습니다 innerHTML. 이것은 실제로 페이지에 데이터를 삽입하는 비표준 방법입니다. 가장 좋은 방법은 텍스트 노드를 만들어 다른 요소 노드에 추가하는 것입니다.
마지막 질문과 관련하여 일부 사람들은 귀하의 작업이 모든 브라우저에서 작동해야한다고 말하는 것을들을 것입니다. 그것은 모두 청중에 달려 있습니다. 잠재 고객 중 아무도 Chrome을 사용하지 않는 경우 걱정하지 마세요. 그러나 최대한 많은 잠재 고객에게 도달하려는 경우 모든 주요 A 급 브라우저를 지원하는 것이 가장 좋습니다
styleNode.styleSheet.cssText = ...
<style>태그는 <head>요소 내에 있어야하며 추가 된 각 태그는 태그의 맨 아래에 추가되어야합니다 <head>.
사용 insertAdjacentHTML와하는 문서에 스타일 태그를 삽입하는 머리 태그 :
document.head.insertAdjacentHTML("beforeend", `<style>body{background:red}</style>`)$('<style>').text("body{background:red}").appendTo(document.head)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>작동하고 모든 브라우저와 호환되는 예제 :
var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);style없음 rel또는 href속성이 link있습니까?
link요소는 질문과 어떤 관련이 있습니까? OP가 style요소를 요청했습니다 . 이 답변은 질문과 아무 관련이 없습니다
style는 인라인 스타일을 추가하는 데 link사용되며 스타일 시트 소스에 적합하며 브라우저 간 문제를 피할 수 있다는 이점이 있습니다.
종종 기존 규칙을 재정의해야 할 필요가 있으므로 HEAD에 새 스타일을 추가하는 것이 모든 경우에 작동하지는 않습니다.
모든 유효한 "BODY에 추가"접근 방식 을 요약 하고 사용 및 디버그 (IE8 +)가 더 편리한 이 간단한 기능을 생각해 냈습니다 .
window.injectCSS = (function(doc){
// wrapper for all injected styles and temp el to create them
var wrap = doc.createElement('div');
var temp = doc.createElement('div');
// rules like "a {color: red}" etc.
return function (cssRules) {
// append wrapper to the body on the first call
if (!wrap.id) {
wrap.id = 'injected-css';
wrap.style.display = 'none';
doc.body.appendChild(wrap);
}
// <br> for IE: http://goo.gl/vLY4x7
temp.innerHTML = '<br><style>'+ cssRules +'</style>';
wrap.appendChild( temp.children[1] );
};
})(document);<style>태그 외부에 <head>태그 를 삽입하는 것도 좋지 않습니다 . 스타일 태그는 다른 곳에는 없지만 <head>태그 내에 나타납니다 . 그것은 html 표준으로 널리 채택되었습니다. 인라인 스타일링을위한 스타일 속성이 있으며 스타일 속성은 태그 자체를 <body>포함하여 <body>태그 내의 모든 태그에 적용 할 수 있습니다 .
이 객체 변수는 유형 속성과 모든 단일 id / class / element와 일치하는 하나의 간단한 전환 규칙을 사용하여 스타일 태그를 헤드 태그에 추가합니다. 콘텐츠 속성 을 수정 하고 필요한만큼 규칙을 삽입하십시오. 콘텐츠 내의 CSS 규칙 이 한 줄에 남아 있는지 확인하십시오 (또는 원하는 경우 새 줄마다 '탈출').
var script = {
type: 'text/css', style: document.createElement('style'),
content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
append: function() {
this.style.type = this.type;
this.style.appendChild(document.createTextNode(this.content));
document.head.appendChild(this.style);
}}; script.append();다음은 클래스를 동적으로 추가하는 변형입니다.
function setClassStyle(class_name, css) {
var style_sheet = document.createElement('style');
if (style_sheet) {
style_sheet.setAttribute('type', 'text/css');
var cstr = '.' + class_name + ' {' + css + '}';
var rules = document.createTextNode(cstr);
if(style_sheet.styleSheet){// IE
style_sheet.styleSheet.cssText = rules.nodeValue;
} else {
style_sheet.appendChild(rules);
}
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(style_sheet);
}
}
}javascipt가 만든 node로 IE6에서 styleNode.cssText가 작동하려면 cssText를 설정하기 전에 노드를 문서에 추가해야합니다.
추가 정보 @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx
이 함수는 appendStyle다음과 같이 함수를 호출 할 때마다 CSS를 삽입 합니다.
appendStyle('css you want to inject')
이것은 style문서의 헤드에 노드를 주입하여 작동 합니다. 이것은 JavaScript를 지연로드하는 데 일반적으로 사용되는 것과 유사한 기술입니다. 대부분의 최신 브라우저에서 일관되게 작동합니다.
appendStyle = function (content) {
style = document.createElement('STYLE');
style.type = 'text/css';
style.appendChild(document.createTextNode(content));
document.head.appendChild(style);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>dolar sit amet</p>
<button onclick='appendStyle("body { background-color: #ff0000;}h1 { font-family: Helvetica, sans-serif; font-variant: small-caps; letter-spacing: 3px; color: #ff0000; background-color: #000000;}p { font-family: Georgia, serif; font-size: 14px; font-style: normal; font-weight: normal; color: #000000; background-color: #ffff00;}")'>Press me to inject CSS!</button>
</body>
</html>다음 스 니펫을 사용하여 외부 CSS 파일을 지연로드 할 수도 있습니다.
appendExternalStyle = function (content) {
link = document.createElement('LINK');
link.rel = 'stylesheet';
link.href = content;
link.type = 'text/css';
document.head.appendChild(link);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html {
font-family: sans-serif;
font-display: swap;
}
</style>
</head>
<body>
<h1>Lorem Ipsum</h1>
<p>dolar sit amet</p>
<button onclick='appendExternalStyle("data:text/css;base64,OjotbW96LXNlbGVjdGlvbntjb2xvcjojZmZmIWltcG9ydGFudDtiYWNrZ3JvdW5kOiMwMDB9OjpzZWxlY3Rpb257Y29sb3I6I2ZmZiFpbXBvcnRhbnQ7YmFja2dyb3VuZDojMDAwfWgxe2ZvbnQtc2l6ZToyZW19Ym9keSxodG1se2NvbG9yOnJnYmEoMCwwLDAsLjc1KTtmb250LXNpemU6MTZweDtmb250LWZhbWlseTpMYXRvLEhlbHZldGljYSBOZXVlLEhlbHZldGljYSxzYW5zLXNlcmlmO2xpbmUtaGVpZ2h0OjEuNjd9YnV0dG9uLGlucHV0e292ZXJmbG93OnZpc2libGV9YnV0dG9uLHNlbGVjdHstd2Via2l0LXRyYW5zaXRpb24tZHVyYXRpb246LjFzO3RyYW5zaXRpb24tZHVyYXRpb246LjFzfQ==")'>press me to inject css!</button>
</body>
</html>당신은 썼습니다 :
var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);왜 안돼?
var styleNode = document.createElement("style");
document.head.appendChild(styleNode);따라서 CSS 코드를 HTML 코드에 쉽게 추가 할 수 있습니다.
styleNode.innerHTML = "h1 { background: red; }\n";
styleNode.innerHTML += "h2 { background: green; }\n";... 또는 DOM으로 직접 :
styleNode.sheet.insertRule("h1 { background: red; }");
styleNode.sheet.insertRule("h2 { background: green; }");나는 이것이 구식 브라우저를 제외한 모든 곳에서 작동 할 것으로 기대합니다.
2019 년 Chrome 에서 확실히 작동합니다 .
직면 한 문제가 페이지에 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>요소의 모든 단점 이나 스타일 시트에 직접 액세스 하는 것보다 훨씬 간단 합니다.
let linkElement: HTMLLinkElement = 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 이상에서 작동합니다
this link may helpful to you:
document.head로 모든 주요 브라우저에서 지원됩니다.