IE6, 8 및 Firefox에서 스타일 속성 제거

Question

IE6, 8 및 Firefox를 지원하는 데 필요한 크로스 브라우저 플랫폼을 통해 Javascript로 작업하려고합니다. 나는이 브라우저들 중 어느 브라우저도 일치하는 Javascript 라이브러리를 가지고 있지 않다는 것을 빨리 발견했다.

목표는 다른 항목의 선택에 따라 동적으로 숨기거나 표시하는 항목을 갖는 것입니다. 일반적으로 display : none과 display : block 사이를 토글하는 것이지만, 다른 개발자의 작업을 위해 display : none을 사용하여 필드를 숨길 수 있지만 디스플레이로 전환하면 레이아웃을 차단합니다. 해결책은 단순히 스타일의 디스플레이 설정을 추출하거나 스타일을 완전히 찢어 버리는 것입니다. 불행히도, 난

파이어 폭스가 지원하는 라이브러리 문제로 실행 내가 ('디스플레이') IE6가에서 getElementById를 지원하지 않습니다에서 getElementById(). style.removeProperty을 지원하지 않았다 지금까지 IE8 & 6 해봤 다() .removeAttribute ('style')

아래 코드는 현재 IE8과 FF로 작업 중입니다 ...하지만 IE6에서도 작동해야합니다.

function displayPrevLPQ(bShow) { 
    if (bShow) { 
     document.getElementById('prevLPQ').removeAttribute('style'); 
    } else { 
     document.getElementById('prevLPQ').style.display = 'none'; 
    } 
} 

function displayBusUnitSub() { 
    var buVal = document.getElementById('BusinessUnitID').value; 
    document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default"); 
    document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default"); 
    document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default"); 

    switch (buVal) { 
     case '11': 
      document.getElementById('buSub0').style.display = 'none'; 
      document.getElementById('buSub1').removeAttribute('style'); 
      document.getElementById('buSub2').style.display = 'none'; 
      break; 
     case '1': 
      document.getElementById('buSub0').style.display = 'none'; 
      document.getElementById('buSub1').style.display = 'none'; 
      document.getElementById('buSub2').removeAttribute('style'); 
      break; 
     default: 
      document.getElementById('buSub0').removeAttribute('style'); 
      document.getElementById('buSub1').style.display = 'none'; 
      document.getElementById('buSub2').style.display = 'none'; 
      break; 
    } 
} 

그럼, 어떻게 세 가지 브라우저에서 작동하는 방식으로 스타일이나 표시 속성을 찢을 수 있습니까?

미리 감사드립니다.

Answer 1

jQuery과 같은 자바 스크립트 라이브러리에는 이미 모든 브라우저 호환성 문제가 분류 및 추상화되어 있습니다.

은 당신이 필요한 모든 것을 지원하기 위해 나타나는 docs에서 :

는

jQuery를 다음 브라우저를 지원합니다

* Firefox 2.0+ 
* Internet Explorer 6+ 
* Safari 3+ 
* Opera 9+ 
* Chrome 1+ 

이것에 특정 jQuery를 기능에 관해서 - .toggle() 봐.

Answer 2

... IE6, 8 및 Firefox를 지원해야합니다. 나는이 브라우저들 중 어느 브라우저도 일치하는 Javascript 라이브러리를 가지고 있지 않다는 것을 빨리 발견했다.

jQuery, Prototype 및 YUI 모두 그 세 브라우저 (더)를 지원합니다. 나는 many of these others도 기대한다. Closure (적어도 대부분의 제품에서 Google이 IE6 지원을 중단했다는 것을 주장하지는 않습니다.)하지만 IE6에 바이 바이를 전파 한 최초의 주요 라이브러리입니다.

Answer 3

대신 클래스를 사용하십시오. 당신은 단지 당신의 요소에 하나 개의 클래스를 사용하는 경우,이만큼 간단합니다

CSS :

*.hidden { 
    display: none; 
} 

자바 스크립트 :

function show(el) { 
    el.className = ""; 
} 

function hide(el) { 
    el.className = "hidden"; 
} 

show(document.getElementById("foo")); 

Answer 4

여전히 디스플레이를 전환 할 수 있습니다 : 블록/없음; 레이아웃 문제를 해결하기 위해 조건부 주석 또는 IE 관련 해킹을 통해 IE를 타겟팅하십시오. 그래서 uSub0의 id가 200px로 설정된 너비가 있다고 가정 해 보겠습니다.그리고 그것의 IE에 침입, 당신은 190px 그들을 위해 필요합니다. 당신이 그들을 어떻게 목표로 삼을 수 있는지 heres. 예 :

uSub0 {폭 : 200 픽셀}

/** ** 6으로 만/

uSub0 {폭 : 200 픽셀; * 폭 : 190px}

/** IE7은 **/

uSub0 {폭 : 200 픽셀}

: 첫 아이 + HTML # uSub0 {폭 : 190px} / * IE7 단 **/

uSub0 {폭 : 200 픽셀}

HTML + # uSub0 {폭 : 190px} / * 6으로, IE7, IE8 **/

uSub0 {너비 : 200px; 폭 : 190px \ 9}

/** IE7, IE8 **/

uSub0 {폭 : 200 픽셀; 너비/*/: 190px}