외부에서 스타일과 파일을 동적으로 도입하기 위한 Javascript 사용법에 대한 자세한 설명

Javascript 삽입 스타일은 프런트 엔드 개발, 특히 프런트 엔드 성능 및 페이지 스키닝을 수정할 때 널리 사용됩니다.

일반적으로 JavaScript 동적 삽입 스타일에는 두 가지 유형이 있습니다. 하나는 페이지에 외부 스타일을 도입하는 것이고, 다른 하나는 effca1d02192b12309c4bdb6ef7748f1 태그는 페이지 스타일을 삽입합니다(이것은 스타일 속성이 아닙니다).

1. 페이지에 외부 스타일 도입:

외부 스타일 파일을 도입하려면 2cdf5bf648cf2f33323966d7f58a7f3f 태그를 사용하세요. 이는 비교적 간단하며 다양한 주류 브라우저와 호환성 문제가 없습니다.

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

외부 스타일 파일을 직접 소개하는 것은 부적절해 보여서 페이지 스타일을 삽입하기 위해 페이지의 c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하는 두 번째 옵션을 선택했습니다.

2. c9ccee2e6ea535a969eb3f532ad9fe89 태그를 사용하여 페이지 스타일을 삽입합니다.

이 방법은 Firefox와 같은 다양한 표준 브라우저에서 표준 브라우징의 cssText 값을 직접 얻을 수 없습니다. document.styleSheets[0].cssRules[0].cssText를 사용하면 브라우저에서 단일 스타일을 얻을 수 있습니다. 동시에 document.styleSheets[0].cssRules[0].cssText=newcssText를 사용하세요. 스타일을 자동으로 업데이트하지 않으므로 ：document.styleSheets[0].cssRules[0].style.cssText=newcssText;를 사용해야 합니다. 이는 부정 행위를 하는 IE만큼 사용자 친화적이지도 단순하지도 않은 것 같습니다. YUI에서는 다음과 같은 좋은 방법이 사용됩니다. createTextNode를 사용하여 c9ccee2e6ea535a969eb3f532ad9fe89 태그에 스타일 문자열을 추가하면 페이지의 요소를 직접 적용할 수 있습니다. 스타일은 이러한 요소가 스크립트를 통해 추가되는지 여부에 관계없이 적용됩니다.

위 내용은 외부에서 스타일과 파일을 동적으로 도입하기 위한 Javascript 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!