javascript - 在 IE 中禁用元素

Question

我正在制作一个 HTML 页面，它使用标签<audio>上的 OnClick<img>作为触发器。

Javascript：

function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("play"))
    {
        element.src="stop.png";
        document.getElementById('audiotag1').src="music.mp3";
        document.getElementById('audiotag1').play();
    } 
    else
    {
        element.src="play.png";
        document.getElementById('audiotag1').src="";
    }
}

IMG 标签：
<img id="myimage" onclick="changeImage()" src="play.png" width="20" height="20" style="position:absolute;top:5px;left:5px;">

音频标签：
<audio loop id="audiotag1" src="music.mp3" preload="auto"></audio>

所以，问题来了，因为 IE8 不支持<audio>标签，我想让图像只在 IE8 或不支持<audio>标签的人上消失。是否可以？我该怎么办？我曾经使用 disabled='disabled' 但它不起作用。

Answer 1

尝试使用条件注释——即条件<!--[if lte IE 8]>。

这将隐藏您的图像小于并包括 IE8（因此 IE7、IE6 等）：

<!--[if lte IE 8]>
#myimage { 
  display: none; 
}
-->

所以你的整个代码看起来像这样：

<!--[if IE 8]> 
  <style> 
    #myimage { 
      display: none; 
    } 
  </style> 
<![end if]-->

Answer 2

您需要的是Modernizr。您可以检查对任何东西的支持。

Also Modernizr includes the html5shiv that is a must if you are planning to support oldie with html5.

You can check for

if (Modernizr.audio) {}

This is much better then checking for specific browsers as it checks the actual support for the html5 audio tag and does not make assumptions based on the browser (IE is not the only outdated browser out there :D)

You can also check for actual file format support. The example from the Modernizr documentation:

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

(Although this is a confusing way of using nested ? : operators IMHO)

Answer 3

You can try through javascript check if you detect IE then return false

if(navigator.appName.indexOf("Internet Explorer") == -1) {
    document.getElementById('myimage').onclick = function () {
         return false;
    }
} else {
    document.getElementById('myimage').onclick = function () {
        alert("cliiing");
        return true;
    }
}