최근에 스타일을 동적으로 삽입하기 위해 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");
그런데 제가 현재 진행하고 있는 프로젝트에는 적용되는 스타일이 거의 없습니다. 외부 스타일 파일을 직접 소개하는 것은 부적절해 보여서
