firefox_javascript 기술에서 addRule의 호환 가능한 작성 방법-JS 튜토리얼-php.cn

HTML 요소의 스타일을 제어하기 위해 스크립트를 사용하는 방법은 정말 많습니다. 단일 요소의 경우 element.style.display=...를 직접 사용하여 하나의 스타일을 수정하거나 element.className=...을 사용하여 여러 스타일을 수정할 수 있습니다. 여러 요소의 스타일을 수정하려면 스크립트를 사용하여 CSS 파일을 직접 가져올 수 있습니다. 현재 프로젝트에는 그런 요구사항이 있습니다. 특정 div 아래의 모든 하위 노드의 스타일을 변경해야 하지만 div 자체의 스타일은 변경하지 않아야 합니다. 생각 없이 코드를 남겼습니다:

코드 복사 코드는 다음과 같습니다. 범위{배경색:파란색;} 입력{배경색:회색} 버튼{margin-top:70px;너비:50px} &lt ;/ 스타일> 🎜> 스팬 ttttt 버튼 onclick='document.styleSheets[0].addRule("#a1 *","ground-color:red")'>리디렉션

이 코드는 훌륭하게 작동했습니다. 어느 날 내 동료가 내 모듈이 그의 브라우저와 충돌한다고 말하기 전까지는 말이죠.

손전등과 돋보기를 사용하여 거의 2천 줄에 달하는 코드를 검색했습니다. . 전혀 문제를 발견하지 못했고 당시에는 위의 코드에 대해 아무런 의심도 하지 않았습니다. div의 ID는 데이터베이스에서 직접 읽으며 등과 같은 숫자 유형입니다. id에 어떤 문자를 사용할 수 있는지에 대해서는 이전에 ie6 및 ff1.5에서 테스트한 적이 있습니다.

코드를 복사하세요 코드는 다음과 같습니다. 이러한 ID 설정은 document.getElementById("A Shun") 문서에서 사용할 수 있습니다. getElementById("?? ?"), document.getElementById("-1"),

순수한 숫자는 물론 읽는 데 문제가 없습니다.

마지막으로 디버깅을 반복한 후 범인인 addRule을 찾습니다. document.styleSheets[0].addRule("#a1 *","Background-color:red") document.styleSheets[0].addRule( "#123 *" ,"Background-color:red") 문제 없습니다 다음 코드 줄은 IE를 종료합니다. 메모리와 가상 메모리가 급증하고 있는데 RAM이 모두 512개입니다. 갑자기 XP에서 가상 메모리가 충분하지 않다는 메시지가 나타납니다. document.styleSheets[0].addRule("#-1 *","Background-color:red"); 마찬가지로 ff1.5에서는 함수에 오류가 발생하지만 충돌은 발생하지 않습니다. 요약: 1. 즉, ff는 id 값에 상당히 관대합니다. id는 중국어, 영어, 문자, 숫자, 음수, 특수 문자 등 거의 모든 문자일 수 있습니다. 2. 그러나 addRule 함수에서 id가 음수이면 ie와 ff가 모두 실패하고 ie가 충돌합니다. 첨부 파일:

ff에서 addRule을 작성하는 호환 방법

코드 복사 코드 범위{}{Background-color:blue;} 입력{}{Background-color:gray} 버튼{} {margin-top :70px;width:50px}

divdiv

스팬스팬

function f(){ var rule="#a1 *{배경색:빨간색} "; var index=document.styleSheets[0].cssRules.length; document.styleSheets[0].insertRule(rule, index); }

리디렉션