尽管 JS 函数更改了元素属性，但 IE8 v8 并未更改 DOM 元素的类

Question

我有一个屏幕键盘，以便更安全地输入密码。

键盘本身是这样放置的：

<div class="teclado_grafico" id="teclado_grafico">
    <a class="tecla_teclado"  onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 0px;">Q</a>
    <a class="tecla_teclado"  onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 28px;">W</a>
.
.
.
</div>

它有一个“Shift 按钮”，可以触发一个 JS 函数（我确实已经尝试过所有这些）：

if (obj.innerHTML == "Mayus.") {
    try {
        MAYUSCULA_ACTIVADO = !MAYUSCULA_ACTIVADO;
        var tgrafico = document.getElementById("teclado_grafico");
        if(MAYUSCULA_ACTIVADO) {
//            tgrafico.className = "teclado_grafico mayuscula";
//            $("#teclado_grafico").removeClass('minuscula').addClass('mayuscula');
//            $("#teclado_grafico").attr('class', 'teclado_grafico mayuscula');
//            $("#teclado_grafico").attr('className', 'teclado_grafico mayuscula');
            tgrafico.setAttribute('className', "teclado_grafico mayuscula") ||
            tgrafico.setAttribute('class', "teclado_grafico mayuscula");
        } else {
//            tgrafico.className = "teclado_grafico minuscula";
//            $("#teclado_grafico").removeClass('mayuscula').addClass('minuscula');
//            $("#teclado_grafico").attr('class', 'teclado_grafico minuscula');
//            $("#teclado_grafico").attr('className', 'teclado_grafico minuscula');
            tgrafico.setAttribute('className', "teclado_grafico minuscula") ||
            tgrafico.setAttribute('class', "teclado_grafico minuscula");
        }
    } catch (_E) {
        //void
    }
    return;
}

关联的 CSS 是这样的：

.mayuscula a.tecla_teclado{
    text-transform: uppercase;
}
.minuscula a.tecla_teclado{
    text-transform: lowercase;
}

它适用于我尝试过的每一个浏览器。即 6、7；歌剧 10； G铬; FF 3、3.5 和 3.6； Safari 4，...但在 IE8 v8（严格模式）中，类没有改变！我的意思是，使用 IE8 工具进行调试可以让人们看到属性 className 存在并且它发生了变化……但用户看不到字母从大写变为小写，再变为大写。

我只是不知道如何处理这个...我曾抱怨客户端使用 IE6...现在他们更新了他们的东西并且这出现了。任何帮助都会非常有帮助！

EDIT已经尝试过的建议

tgrafico.className = MAYUSCULA_ACTIVADO ? "teclado_grafico mayuscula" : "teclado_grafico minuscula";

但还没有快乐。打开 IE8 开发工具可以在 HTML 选项卡中看到类在预期值之间正确更改，但浏览器只是不正常！

Answer 1

不要为此靠近属性，因为 IE 的属性行为与其他浏览器和跨模式不一致，您不需要处理它们。相反，只需使用元素的 className 属性：

tgrafico.className = MAYUSCULA_ACTIVADO ?
                     "teclado_grafico mayuscula" : "teclado_grafico minuscula";

更新

这似乎是 IE 8 中的一个错误。该方法绝对正确，并且类正在切换：您可以通过更改适当的 CSS 并在单击 shift 按钮时观察文本颜色的正确变化来证明这一点：

.mayuscula a.tecla_teclado{
    text-transform: uppercase;
    color: green;
}
.minuscula a.tecla_teclado{
    text-transform: lowercase;
    color: blue;
}

此外，每个<a> 元素的currentStyle.textTransform 属性设置正确，您可以使用以下内容证明：

<a class="tecla_teclado" onclick="alert(this.currentStyle.textTransform);">Q</a>

所以我们断定这是 IE 8 中的渲染错误。我找到了一种解决方法，即不在默认状态下应用 text-transform，即大写。所以使用我的类切换代码并将你的 CSS 更改为

.mayuscula a.tecla_teclado{
}
.minuscula a.tecla_teclado{
    text-transform: lowercase;
}

...会修复它。

Answer 2

我会尝试使用 jquery，基本上所有的键都是小写的，并且有 css 类

.Upper {text-decoration:uppercase; }

下面的代码应该可以工作

$('.shift').click(function(){ 
    $('.key').toggleClass('Upper');
});

实际上我有几乎相同的东西，但没有文本装饰属性，并且 IE8 do 更新了 toggleClass 上 DOM 元素的外观 否则你应该看看 jQuery 在 toggleClass 上做了什么，以使其跨浏览器

Answer 3

我在 IE8 上遇到过这种情况。我的解决方案是：

tgrafico.className ="teclado_grafico mayuscula";

不通过 setAttribute('className'...

我不知道为什么会这样。

附：对不起我的英语... :)