可在 Firefox 上更改颜色，但不适用于 IE 或 Chrome

Question

我很难弄清楚为什么这不能在 chrome 或 IE 上运行，但在 Firefox 中运行良好。本质上，我有一个导航栏，我突出显示被点击的链接，直到另一个链接被点击

这是我的 JS 函数：

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var Elements = document.getElementsByClassName('button');
    Array.prototype.filter.call(Elements, function(Element){
       Element.style = "background: #F0E68C;color: black;";
    });
    which.style = "background: #333; color: #fff;";
} 

我的导航栏如下所示。页面被加载到 id "one" 中。

<div id="menu">
    <ul>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
        <li><a class="button" href="#" onclick="updateObjectIframe(this); return false;">TEST</a></li>
    </ul>
</div>

<div id="one" style="height:95%;width:100%;">
    <object id="foo" name="foo">

    </object>
</div>

任何帮助将不胜感激。

Answer 1

在 javascript 中更改样式时，您需要设置样式的各个组件。像这样：

...
Element.style.background = "#F0E68C";
Element.style.color = "black";
...
which.style.background = "#333"
which.style.color = "#fff";
...

Answer 2

我会尝试使用普通的 JavaScript 技术重写它。如果你避免任何聪明的事情，你总是最安全的。以下在 Chrome 和 IE9 中具有预期的（或我推断为预期的）视觉效果。您的奇怪循环结构在它们中都有效，但传统的 for 循环更清晰。失败的是将字符串分配给样式属性。这看起来是一个不可移植的 Firefox 扩展。

function updateObjectIframe(which){
    document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
    var elements = document.getElementsByClassName('button');
    for ( var i = 0; i < elements.length; ++i ) {
         var element = elements[i];
         element.style.background = '#F0E68C'
         element.style.color = 'black';
    }
    which.style.background = '#333';
    which.style.color = '#fff';
} 

更新

document.getElementsByClassName() 在 IE9 之前似乎不受 IE 支持。这就是为什么每个人都非常喜欢 jQuery。

另外，一种更简洁、更时髦的方法可能是在style 标签中设置两种 CSS 样式：一种用于“活动”按钮，一种用于“非活动”按钮。然后更改元素的className 属性，并使用不同的方式来收集“按钮”元素（因为它们现在有不同的类，而getElementsByClassName 也是不可移植的）：

<script language="JavaScript">
    function updateObjectIframe(which){
        document.getElementById('one').innerHTML = '<'+'object id="foo" style="height:100%;width:100%;" name="foo" type="text/html" data="'+which.href+'"><\/object>';
        var elements = menu.getElementsByTagName('a');
        for ( var i = 0; i < elements.length; ++i ) {
            elements[i].className = 'button';
        }
        which.className = 'selected-button';
    } 
</script>
<style type="text/css">
#menu a.button{
    background-color: #F0E68C;
    color: black;
}
#menu a.selected-button
{
    background-color: #333;
    color: #fff;
}
</style>

Answer 3

只需使用类似的东西：

onlick="$(".classWhichAllYourLinksHave").style("background","WhatEverYouUse")this.style = "background: #F0E68C;color: black;"" 

而不是

onclick="updateObjectIframe(this); return false;" 

或者调用函数