Javascript 适用于除 IE 9 以外的所有浏览器

Question

当我单击一个按钮时，使用 onClick 函数，我将一张图片替换为另一张图片。代码是这样的

<a class="blue_button" onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"
href="javascript:getsupport('zip')" id="download">
<img id="zip" src="img/zip.png">
<img id="loading" src="img/loading.gif">
</a>

在 css 中我有这个:

    .blue_button{
    display:block;
    height:30px;
    margin-right:20px;
    float:left;
    width:110px;
    color:#FFF;
    font-size:12px;
        border-radius:4px;
        padding:0 23px 0 20px;
    }

        .blue_button img{
            position:relative;


top:5px;
        margin-right:7px;
    }

    .blue_button img#loading{
        display:none;
        float:left;
        top:-17px;
    }

它适用于除 IE9 之外的所有浏览器。如果我激活兼容模式，它会工作，但我需要保持标准模式。

== 已解决 ==使用不显眼的js。感谢大家

window.onload = loading;
function loading()
{
    document.getElementById('download').onclick = function()
    {
        document.getElementById('zip').style.visibility = 'hidden';
        document.getElementById('loading').style.display = 'block';
    }
}

Answer 1

我想我发现了问题:

onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"

onclick 事件不需要 javascript:

如果您包含其余的 JavaScript，我也许可以测试它。

您还同时拥有 onclick 和 href。您可能只想使用其中之一。您可能想看看 addEventListener()，您可以阅读更多相关信息 here .

另一方面，您的 CSS 类命名非常糟糕。你不想称它们为蓝色、红色等。这可以改变。你想让它们保持语义。

阅读:What Makes For a Semantic Class Name?