Javascript_기본 지식에서 CSS 파일을 동적으로 참조하는 2가지 방법 소개

최근에 스타일을 동적으로 삽입하기 위해 JavaScript가 필요한 프로젝트를 진행했는데 이전 방법이 실패했습니다! 2시간 동안 확인을 했던 이유는 내 손이 불쌍해서 마지막으로 얘기해보자!

Javascript 삽입 스타일은 프런트엔드 개발, 특히 프런트엔드 성능 및 페이지 스키닝을 수정할 때 널리 사용됩니다. 최근에 제가 한 작업은 사용자가 다른 사이트의 버튼을 클릭하면 해당 사이트의 페이지 아래에 스크립트가 삽입되어 실행되는 것입니다. 여기에는 스타일 삽입도 포함됩니다.

일반적으로 JavaScript 동적 삽입 스타일에는 두 가지 유형이 있습니다. 하나는 페이지에 외부 스타일을 도입하는 것이고, 다른 하나는

태그를 사용하는 것입니다. ; style> 태그는 페이지 스타일을 삽입합니다(이것은 스타일 속성이 아닙니다).

1. 페이지에 외부 스타일을 도입합니다:

의 태그를 사용하면 비교적 간단하며 주요 브라우저와 호환성 문제가 없습니다.

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

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

includeLinkStyle("http://css.jb51.net/home/css/reset.css?v=20101227");

그런데 제가 현재 진행하고 있는 프로젝트에는 적용되는 스타일이 거의 없습니다. 외부 스타일 파일을 직접 소개하는 것은 부적절해 보여서

2.

이 방법은 다양한 주류 브라우저에서 호환성 문제가 있습니다. Firefox와 같은 표준 브라우저는 styleSheet 설정을 위한 cssText 값을 직접 얻을 수 없습니다. 표준 브라우저에서는 document.styleSheets[0].cssRules[0]만 사용할 수 있습니다. 스타일을 개별적으로 사용합니다. document.styleSheets[0].cssRules[0].cssText=newcssText; 페이지에서 스타일을 자동으로 업데이트하지 않으므로 다음을 사용해야 합니다. document.styleSheets[0].cssRules[0].style.cssText = newcssText; 이는 부정 행위를 하는 IE만큼 사용자 친화적이지도 단순하지도 않은 것 같습니다. YUI에서는 다음과 같은 좋은 방법이 사용됩니다. createTextNode를 사용하여

태그에 스타일 문자열을 추가합니다.

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

함수 includeStyleElement(styles, styleId) {

if (document.getElementById(styleId)) {
return
}
var style = document.createElement("style");
style.id = styleId;
// IE에 대해 다음 속성을 설정하는 것이 가장 좋습니다
/*if (isIE()) {
style.type = "text/css";
style.media = "screen"
}* /
(document.getElementsByTagName("head")[0] || document.body).appendChild(style);
if (style.styleSheet) { //예:
style.styleSheet.cssText = 스타일;
} else { //w3c용
style.appendChild(document.createTextNode(styles));
}
}
var styles = "#div{배경색: # FF3300; 색상:#FFFFFF }";
includeStyleElement(styles, "newstyle");

이러한 방식으로 요소가 스크립트를 통해 추가되는지 여부에 관계없이 페이지의 요소에 스타일을 직접 적용할 수 있습니다.

손 정보:

이 코드를 보세요:

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

var divObj = document.createElement("div");
divObj.id = "__div";
divObj.innerHTML = "JS를 테스트하여 DOM 및 스타일 삽입";
document.body. AppendChild(divObj);

var styles = "#__div{배경색상: #FF3300; 색상:#FFFFFF }";
includeStyleElement(styles, "newstyle");

앞서 언급했듯이 이 프로젝트에서는 사용자가 다른 사이트의 버튼을 클릭하면 해당 사이트의 페이지 아래에 스크립트가 삽입되어 실행됩니다. 최대한 많이 만들었습니다. 요소 ID는 고유합니다. 충돌을 방지하기 위해 요소 ID 앞에 "__"를 추가하여 비공개성을 나타냅니다. 결과는 비극적입니다. IE6 및 IE7 클래스 이름과 ID는 밑줄("_")로 시작할 수 없습니다. 원인을 찾는데 2시간이 걸렸습니다. 참으로 비극적인 일입니다! 결론을 내리자! 프론트엔드 작업을 할 때 저렴하게 작업하지 마세요!