JavaScript 삽입 스타일 구현 code_javascript 기술-JS 튜토리얼-php.cn

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

일반적으로 JavaScript 동적 삽입 스타일에는 두 가지 유형이 있습니다. 하나는 의 태그를 사용하여 외부 스타일을 도입하는 것이고, 다른 하나는; 페이지 스타일을 삽입하려면 태그를 사용하세요. 이는 스타일 속성이 아닙니다. 1. 페이지에 외부 스타일 도입: 외부 스타일 파일을 도입하려면 태그를 사용하세요. 주류 브라우저.

코드 복사 코드는 다음과 같습니다. 함수 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와 같은 다양한 주류 브라우저에서 호환성 문제가 있습니다. . 값, 표준 브라우저에서만 document.styleSheets[0].cssRules[0].cssText를 사용하여 동시에 스타일을 개별적으로 얻을 수 있습니다. document.styleSheets[0].cssRules[0].cssText= newcssText; 스타일의 경우 다음을 사용해야 합니다. document.styleSheets[0].cssRules[0].style.cssText=newcssText; 이는 부정행위를 하는 IE만큼 사용자 친화적이지 않고 간단하지 않습니다. YUI에서는 다음과 같은 좋은 방법이 사용됩니다. createTextNode를 사용하여 스타일 문자열을 추가합니다. 코드 복사 코드는 다음과 같습니다. function includeStyleElement(styles,styleId) { if (document.getElementById(styleId)) { return } var style = document.createElement("style"); style.id = styleId //여기에서는 다음 속성을 설정하는 것이 가장 좋습니다. /* if (isIE ()) { style.type = "text/css"; style.media = "screen" }*/ (document.getElementsByTagName("head")[0 ] || document.body).appendChild(style); if (style.styleSheet) { //for 즉 style.styleSheet.cssText = styles } else {//w3c style.appendChild(document.createTextNode(styles)); } } var styles = "#div{Background-color: #FF3300; color:#FFFFFF }" includeStyleElement( styles," newstyle"); 이러한 방식으로 이러한 요소가 스크립트를 통해 추가되는지 여부에 관계없이 스타일을 페이지의 요소에 직접 적용할 수 있습니다. 손 저렴 정보: 이 코드 보기: 코드 복사 코드는 다음과 같습니다. var divObj = document.createElement("div"); divObj .id = "__div"; divObj .innerHTML="JS를 테스트하여 DOM 및 스타일 삽입"; document.body.appendChild(divObj ); var styles = "#__div{배경색: #FF3300; color:#FFFFFF }" includeStyleElement(styles,"newstyle"); > front 이 프로젝트에서 언급했듯이 사용자가 다른 사이트의 버튼을 클릭하면 해당 사이트의 페이지 아래에 스크립트가 삽입되어 실행됩니다. 여기에는 고유성을 보장하기 위한 작업도 포함됩니다. 최대한 제가 만든 요소 ID 중 충돌을 방지하기 위해 요소 ID 앞에 "__"를 추가하여 비공개성을 표시했습니다. 결과는 비극적입니다. IE6 및 IE7 클래스 이름과 ID는 밑줄("_")로 시작할 수 없습니다. 원인을 찾는데 2시간이 걸렸습니다. 참으로 비극적인 일입니다! 결론을 내리자!