JavaScript를 사용하여 IE8에서 불투명도 변경하기 onkeyup() (다시)

Question

IE 불투명도 질문을 게시하기 전에 사과하지만 적어도 30 개의 다른 페이지를 읽었으며 작동하지 못합니다. .

사용자가 카드 번호 <input> 필드에 입력 한 첫 번째 문자를 기준으로 미국 (Visa, MC, Amex, Discover)의 4 가지 주요 신용 카드 유형의 불투명도를 동적으로 변경하려고합니다.

내 코드는 IE9, Firefox, Safari 및 Chrome에서 잘 작동하지만 Windows XP 지원에 필요한 IE8은 아닙니다.

사람이 내가 부족 알고 있나요 ...

object.style.filter = 'alpha(opacity=13)'; 
object.filter = 'alpha(opacity=13)'; 
object.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity=13)'; 

나는 심지어 불투명도에 O를 활용했는데, 그것은 도움이 기대하지 :

본인은 다음과 설정을 시도? ...

JQuery와 솔루션은 괜찮지 만, 나는 그것이 학문적 이유로 자바 스크립트 가능하다면 알고 싶습니다

나는 다음과 같은 HTML이 :

<span> 
    <input name='cardnumber' value="3717XXXXXXX8775" type='text' id='cardnumber' onkeyup='setCardType();'> 
</span> 
<span> 
    <img src='/style/icon_visa.gif' id='visa' alt='This is a Visa' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp; 
    <img src='/style/icon_mastercard.gif' id='mastercard' alt='This is a MasterCard' style='opacity:.13;filter:alpha(opacity=13);'>&nbsp;&nbsp; 
    <img src='/style/icon_amex.gif' id='amex' alt='This is an American Express' style='opacity:1;filter:alpha(opacity=100);'>&nbsp;&nbsp; 
    <img src='/style/icon_discover.gif' id='discover' alt='This is a Discover Card' style='opacity:.13;filter:alpha(opacity=13);'> 
</span> 
<input type='hidden' name='cardtype' id='cardtype' value="American Express"> 

다음과 같은 자바 스크립트를 :

function setCardType() { 
var cardnumber = document.getElementById('cardnumber').value; 
cardnumber = cardnumber.replace(/[^0-9]/g,''); 
document.getElementById('cardnumber').value = cardnumber; 

var firstchar = document.getElementById('cardnumber').value.charAt(0); 
if (firstchar == 3) { 
    if (document.getElementById('visa').style.opacity) { 
     document.getElementById('visa').style.opacity = .13; 
     document.getElementById('mastercard').style.opacity = .13; 
     document.getElementById('amex').style.opacity = 1; 
     document.getElementById('discover').style.opacity = .13; 
    } 
    else { 
     document.getElementById('visa').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('mastercard').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('amex').style.filter = 'alpha(opacity=100)'; 
     document.getElementById('discover').style.filter = 'alpha(opacity=13)'; 
    } 
    document.getElementById('confirmCardType').innerHTML = 'American Express'; 
} 
else if (firstchar == 4) { 
    if (document.getElementById('visa').style.opacity) { 
     document.getElementById('visa').style.opacity = 1; 
     document.getElementById('mastercard').style.opacity = .13; 
     document.getElementById('amex').style.opacity = .13; 
     document.getElementById('discover').style.opacity = .13; 
    } 
    else { 
     document.getElementById('visa').style.filter = 'alpha(opacity=100)'; 
     document.getElementById('mastercard').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('amex').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('discover').style.filter = 'alpha(opacity=13)'; 
    } 
    document.getElementById('confirmCardType').innerHTML = 'Visa'; 
} 
else if (firstchar == 5) { 
    if (document.getElementById('visa').style.opacity) { 
     document.getElementById('visa').style.opacity = .13; 
     document.getElementById('mastercard').style.opacity = 1; 
     document.getElementById('amex').style.opacity = .13; 
     document.getElementById('discover').style.opacity = .13; 
    } 
    else { 
     document.getElementById('visa').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('mastercard').style.filter = 'alpha(opacity=100)'; 
     document.getElementById('amex').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('discover').style.filter = 'alpha(opacity=13)'; 
    } 
    document.getElementById('confirmCardType').innerHTML = 'MasterCard'; 
} 
else if (firstchar == 6) { 
    if (document.getElementById('visa').style.opacity) { 
     document.getElementById('visa').style.opacity = .13; 
     document.getElementById('mastercard').style.opacity = .13; 
     document.getElementById('amex').style.opacity = .13; 
     document.getElementById('discover').style.opacity = 1; 
    } 
    else { 
     document.getElementById('visa').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('mastercard').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('amex').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('discover').style.filter = 'alpha(opacity=100)'; 
    } 
    document.getElementById('confirmCardType').innerHTML = 'Discover'; 
} 
else { 
    if (document.getElementById('visa').style.opacity) { 
     document.getElementById('visa').style.opacity = .13; 
     document.getElementById('mastercard').style.opacity = .13; 
     document.getElementById('amex').style.opacity = .13; 
     document.getElementById('discover').style.opacity = .13; 
    } 
    else { 
     document.getElementById('visa').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('mastercard').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('amex').style.filter = 'alpha(opacity=13)'; 
     document.getElementById('discover').style.filter = 'alpha(opacity=13)'; 
    } 
    document.getElementById('confirmCardType').innerHTML = ''; 
} 
return true; 

}

EDIT : 여기 짧게하는 JQuery와 용액이며 상당히 코드를 ENS :

function setCardType() { 
var cardnumber = document.getElementById('cardnumber').value; 
cardnumber = cardnumber.replace(/[^0-9]/g,''); 
document.getElementById('cardnumber').value = cardnumber; 

var firstchar = cardnumber.charAt(0); 
if (firstchar == 3) { 
    $('#visa').css('opacity', .13); 
    $('#mastercard').css('opacity', .13); 
    $('#amex').css('opacity', 1); 
    $('#discover').css('opacity', .13); 
    document.getElementById('confirmCardType').innerHTML = 'American Express'; 
} 
else if (firstchar == 4) { 
    $('#visa').css('opacity', 1); 
    $('#mastercard').css('opacity', .13); 
    $('#amex').css('opacity', .13); 
    $('#discover').css('opacity', .13); 
    document.getElementById('confirmCardType').innerHTML = 'Visa'; 
} 
else if (firstchar == 5) { 
    $('#visa').css('opacity', .13); 
    $('#mastercard').css('opacity', 1); 
    $('#amex').css('opacity', .13); 
    $('#discover').css('opacity', .13); 
    document.getElementById('confirmCardType').innerHTML = 'MasterCard'; 
} 
else if (firstchar == 6) { 
    $('#visa').css('opacity', .13); 
    $('#mastercard').css('opacity', .13); 
    $('#amex').css('opacity', .13); 
    $('#discover').css('opacity', 1); 
    document.getElementById('confirmCardType').innerHTML = 'Discover'; 
} 
else { 
    $('#visa').css('opacity', .13); 
    $('#mastercard').css('opacity', .13); 
    $('#amex').css('opacity', .13); 
    $('#discover').css('opacity', .13); 
    document.getElementById('confirmCardType').innerHTML = ''; 
} 
return true; 

}

Answer 1

$("#visa").css("opacity", .13); 

jQuery를 자동으로 당신을 위해 상호 호환성 문제를 처리합니다. 그것은 훌륭합니다 ...