JavaScript：不透明度適用於歌劇，但不適用於IE

Question

我對圖像使用了以下腳本，它似乎可以正常工作； 但是在Internet Explorer中，文本並未如預期那樣褪色。 有任何想法嗎？

 <td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a" onmouseover="over(this)" onmouseout="out()">Apie įmonę</a>|</li>
    <li><a href="#" ID="b" onmouseover="over(this)" onmouseout="out()">Naujienos</a>|</li>
    <li><a href="#" ID="c" onmouseover="over(this)" onmouseout="out()">Kainynai</a>|</li>
    <li><a href="#" ID="d" onmouseover="over(this)" onmouseout="out()">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e" onmouseover="over(this)" onmouseout="out()">Servisas</a>|</li>
    <li><a href="#" ID="f" onmouseover="over(this)" onmouseout="out()">Akcijos</a>|</li>
    <li><a href="#" ID="g" onmouseover="over(this)" onmouseout="out()">Karjera</a>|</li>
    <li><a href="#" ID="h" onmouseover="over(this)" onmouseout="out()">Galerija</a>|</li>
    <li><a href="#" ID="i" onmouseover="over(this)" onmouseout="out()">Naudota technika</a></li>
</ul>
</td>
<script>
var ba = new Array("a","b","c","d","e","f","g","h","i");


function over(from){
var value = 5; 

for(i=0;i<ba.length;i++){

    if(from.id==ba[i])
    {
        //do nothing
    }
    else{
        document.getElementById(ba[i]).style.MozOpacity = value/10;
        document.getElementById(ba[i]).style.opacity = value/10;
        document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';

    }
}
}
function out(){
var value = 10;

for(i=0;i<ba.length;i++){

document.getElementById(ba[i]).style.MozOpacity = value/10;
document.getElementById(ba[i]).style.opacity = value/10;
document.getElementById(ba[i]).style.filter = 'alpha(opacity=' + value*10 + ')';
}

}
</script>

謝謝！

Answer 1

檢查一下： http : //www.quirksmode.org/css/opacity.html

重要部分：“ IE8使用新的表示法： -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; “

另外，Internet Explorer（6和8）似乎認為該元素必須具有明確設置的width ，然后才能透明。 奇怪的。 上面的鏈接的確設置了CSS的寬度，但是沒有提到這個奇怪的要求。

（盡管您沒有特別詢問，但我建議您使用jQuery來執行此類任務-使用這種效果更容易使用，請參見例如： http : //api.jquery.com/fadeTo/ ）

Answer 2

我建議創建一個類定義來設置元素的不透明度。 然后，在您的JavaScript中，您只需要編寫：

document.getElementById(ba[i]).className = "opacityClassName".

在CSS中，您的opacityClassName樣式定義可以如下所示：

.opacityClassName {
    filter: alpha(opacity:0.5);
    KHTMLOpacity: 0.5;
    MozOpacity: 0.5;
    -khtml-opacity:.50;
    -ms-filter:"alpha(opacity=50)";
    -moz-opacity:.50;
    filter:alpha(opacity=50);
    opacity:.50;
}

這樣，您就不必擔心語法如下：

document.getElementById(ba[i]).style.ms-filter

不工作。

Answer 3

使用jQuery。 我知道這是老生常談的答案，但在這種情況下，現貨上：它處理瀏覽器的怪癖你的，自動的。

觀察示例：

<table>
<tr>
<td colspan="5" ID='links'>
<ul id="navlist">
    <li id="active"><a href="#" id="a">Apie įmonę</a>|</li>
    <li><a href="#" ID="b">Naujienos</a>|</li>
    <li><a href="#" ID="c">Kainynai</a>|</li>
    <li><a href="#" ID="d">Aktyvaus laisvalaikio priemonės</a>|</li>
    <li><a href="#" ID="e">Servisas</a>|</li>
    <li><a href="#" ID="f">Akcijos</a>|</li>
    <li><a href="#" ID="g">Karjera</a>|</li>
    <li><a href="#" ID="h">Galerija</a>|</li>
    <li><a href="#" ID="i">Naudota technika</a></li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script><!-- load jQuery -->
<script>
// run when the document is loaded
$(document).ready(function(){

    // give each link under #navlist opacity, unless cursor is over it
    $('#navlist a').mouseover(function(){
        var current = this;
            // run the following for each matching element
        $('#navlist a').each(function(index,element){
            if (element != current) {
                // handles browser quirks for us
                    $(element).css('opacity',0.5);
            }
        });
    });

    // remove the opacity
    $('#navlist a').mouseout(function(event){
        $('#navlist a').each(function(index,element){
            $(element).css('opacity',1);
        });
    });
});

</script>

跨瀏覽器（Opera，Chromium，Midori，Firefox，IE6 和 IE8）的跨瀏覽器，只需較少的代碼即可完成工作。 花費時間：15分鍾。