JavaScript는 동적 스타일 구현 code_javascript 기술을 삽입합니다.

동적 스크립트와 유사하게 동적 스타일이라 불리는 것은 페이지가 처음 로드될 때 존재하지 않는 스타일을 의미하며, 페이지가 로드된 후 동적 스타일이 페이지에 동적으로 추가됩니다.

다음의 일반적인 요소를 예로 들어보겠습니다.

이 요소는 DOM 코드를 사용하여 쉽게 동적으로 생성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css"
link.href = "style.css" ;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

위 코드는 모든 주요 브라우저에서 정상적으로 실행될 수 있습니다. 모든 브라우저에서 일관된 동작을 보장하려면 요소가 아닌 요소에 추가해야 합니다. 전체 과정은 다음 함수로 표현할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

function loadStyles( url) {
var link = document.createElement("link");
link.rel = "stylesheet"
link.type = "text/css"
link.href = url
var head = document.getElementsByTagName("head")[0];
head.appendChild(link)
}
loadStyles("style.css")

외부 스타일 파일을 로드하는 프로세스는 비동기식입니다. 즉, 스타일을 로드하고 JavaScript 코드를 실행하는 프로세스에 고정된 순서가 없습니다.

스타일을 정의하는 또 다른 방법은 다음과 같이

동일한 논리에 따라 다음 DOM 코드가 유효해야 합니다.

코드 복사 코드는 다음과 같습니다.

var style = document.createElement("style")
style.type = "text/css"
style.appendChild( document .createTextNode("body{Background-color:red;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style); 🎜 >
위 코드는 Firefox, Safrai, Chrome, Opera에서 실행 가능하지만 IE에서는 오류가 보고됩니다. IE는

복사 code 코드는 다음과 같습니다. var style = document.createElement("style")

style.type = "text/css";

try {
style.appendChild(document.createTextNode("body{Background-color:red}")))
} catch(예) {
style.styleSheet.cssText = "body{ background -color:red}";
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);


with 역학 포함된 스크립트를 추가하는 것과 마찬가지로 다시 작성된 코드는 try-catch 문을 사용하여 IE에서 발생하는 오류를 잡은 다음 IE용 특수 메서드를 사용하여 스타일을 설정합니다. 일반적인 해결 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. function loadStyleString (css) {

var style = document.createElement("style");

style.type = "text/css"
try {
style.appendChild(document.createTextNode(css) );
} catch(예) {
style.styleSheet.cssText = css;
}
var head = document.getElementsByTagName("head")[0]
head.appendChild (스타일)
}
loadStyleString("body{배경색:빨간색}")