최근에 프로젝트를 진행하고 있었고 스타일을 동적으로 삽입하기 위해 JavaScript가 필요했지만 이전 방법은 실패했습니다! 내가 2 시간 동안 확인한 이유는 내가 뻔뻔스런 사람이기 때문입니다. 결국 이것에 대해 이야기합시다!
JavaScript 삽입 스타일은 특히 프론트 엔드 성능 및 페이지 스키닝을 수정할 때 프론트 엔드 개발에 널리 사용됩니다. 최근에 수행 한 작업은 사용자가 다른 사이트의 버튼을 클릭하고 스타일 삽입을 포함하여 다른 사이트 페이지 아래에 스크립트를 삽입한다는 것입니다.
일반적으로 JavaScript를위한 두 가지 유형의 동적 삽입 스타일이 있습니다. 하나는 외부 스타일을 페이지에 소개하고 <head>의 <link> 태그를 사용하여 외부 스타일 파일을 소개하는 것입니다. 다른 하나는 <style> 태그를 사용하여 페이지에 페이지 스타일을 삽입하는 것입니다 (여기에 언급 된 것은 스타일 속성이 아닙니다).
1. 페이지에 외부 스타일을 소개합니다.
<head>의 <link> 태그를 사용하여 외부 스타일 파일을 소개하면 비교적 간단하며 각 주류 브라우저에 대한 호환성 문제가 없습니다.
코드 사본은 다음과 같습니다.
함수 includelinkstyle (url) {
var link = document.createelement ( "link");
link.rel = "스타일 시트";
link.type = "text/css";
link.href = url;
document.getElementsByTagName ( "Head") [0] .AppendChild (Link);
}
IncludeLinkStyle ( "http://css.vevb.com/home/css/reset.css?v=20101227");
그러나 현재하고있는 프로젝트에는 자체적으로 적용되는 스타일이 거의 없으며 외부 스타일 파일을 직접 소개하는 것은 부적절 해 보이므로 <Style> 태그를 사용하여 페이지 스타일을 삽입하여 두 번째 솔루션을 선택했습니다.
2. <style> 태그를 사용하여 페이지 스타일을 삽입하십시오.
이 방법은 다양한 주류 브라우저에서 호환성 문제가 있습니다. Firefox와 같은 표준 브라우저는 스타일 시트의 CSStext 값을 직접 얻을 수 없습니다. 표준 브라우저에서는 document.stylesheets [0] .cssrules [0] .csstext 만 사용하여 스타일을 개별적으로 얻을 수 있습니다. 동시에 사용 : document.stylesheets [0] .cssrules [0] .csstext = newcsstext; 페이지는 스타일을 자동으로 업데이트하지 않으며 다음을 사용해야합니다. document.stylesheets [0] .cssrules [0] .style.csstext = newcsstext; 이것은 인간화되지 않고 사용하기 쉽지 않은 것 같습니다. 좋은 방법은 yui : style.appendchild (document.createtextnode (Styles))에서 사용됩니다. CreateTextNode를 사용하여 <style> 태그에 스타일 문자열을 추가하십시오.
코드 사본은 다음과 같습니다.
기능 포함 기능 (Styles, StyleId) {
if (document.getElementByid (styleid)) {
반품
}
var style = document.createelement ( "스타일");
style.id = styleid;
// 여기에서 다음 속성을 설정하는 것이 가장 좋습니다.
/*if (isie ()) {
style.type = "text/css";
style.media = "화면"
}*/
(Document.GetElementsByTagName ( "Head") [0] || Document.body) .AppendChild (스타일);
if (style.stylesheet) {// IE
style.stylesheet.csstext = 스타일;
} else {// W3C의 경우
style.appendChild (document.createtextNode (Styles));
}
}
var styles = "#div {배경색 :#ff3300; 색상 : #fffff}";
IncludestyleElement (Styles, "Newstyle");
이러한 방식으로, 페이지의 요소는 스크립트를 통해 요소가 추가되는지 여부에 관계없이 스타일에 직접 적용될 수 있습니다.
어리석은 것에 대해 :
이 코드를보십시오.
코드 사본은 다음과 같습니다.
var divobj = document.createElement ( "div");
divobj.id = "__div";
divobj.innerhtml = "테스트 js 삽입 dom and style";
document.body.appendchild (divobj);
var styles = "#__ div {배경색 :#ff3300; color : #fffff}";
IncludestyleElement (Styles, "Newstyle");
앞에서 언급 했듯이이 프로젝트는 사용자가 다른 사이트의 버튼을 클릭하고 다른 사이트 페이지 아래에 스크립트를 삽입하여 실행하는 경우입니다. 여기에는 스타일 삽입이 포함됩니다. 요소 ID의 독창성을 최대한 많이 생성하기 위해 요소 ID 앞에 "__"를 추가하여 충돌에 대한 개인 보호를 나타냅니다. 결과적으로 비극이 발생했습니다. IE6, IE7 클래스 및 ID의 이름 지정은 밑줄 ( "_")으로 시작할 수 없었으며 실제로 이것을 잊어 버렸습니다! 이유를 찾는 데 2 시간이 걸렸습니다. 비극입니다! 결론을 내리십시오! 프론트 엔드를 할 때 싸지 마십시오!