Javascriptを使用してIE8で不透明度を変更するonkeyup（）（再び）

Question

別の IE不透明な質問ですが、少なくとも30の異なるページを読んでいます。

ユーザーがカード番号<input>フィールドに入力する最初の文字に基づいて、米国の4つの主要なクレジットカードの種類（Visa、MC、Amex、Discover）の不透明度を動的に変更しようとしています。

私のコードは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を活用しようとしましたか？

<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"> 

と、次のJavascript：私は、次のHTMLを持って

jQueryのソリューションは結構ですが、私はそれが学術的な理由のためにJavaScriptで可能ですかどうかを知りたいのですが...

：

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が自動的に相互互換性の問題を処理します。それはすばらしいです...