IE8 v8 not changing class for a DOM element despite JS function changing the element attribute

Question

I have an on-screen keyboard in order to provide a safer input for passwords.

The keyboard itself is placed like this:

<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>

And it has a "Shift button" which fires a JS function with this (I've already tried all that, indeed):

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;
}

The associated CSS is like this:

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

It works on every single browser I've tried. IE 6, 7; Opera 10; GChrome; FF 3, 3.5 and 3.6; Safari 4,... but in IE8 v8 (strict mode) the class is not changed! I mean, debuggin' with the IE8 tools allows one to see that the attribute className is there and it changes... but the user does not see the letters changing from uppercase to lowercase, to uppercase again.

I just don't know how to handle this... I had complains about the client using IE6... now they updated their stuff and this shows up. Any help will be reaaaaly helpful!

EDIT Already tried suggestions of

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

but no joy yet. Opening IE8 dev's tools allows one to see in the HTML tab that the class is changing correctly between the expected values, but the browser just does not behave!

Answer 1

Don't go anywhere near attributes for this, since IE's behaviour with attributes is inconsistent with other browsers and across modes and you don't need to deal with them. Instead, just use the element's className property:

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

UPDATE

This appears to be a bug in IE 8. The approach is definitely correct, and the class is getting switched: you can prove this by changing the appropriate CSS and observing the text color changes correctly when you click the shift button:

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

Furthermore, each <a> element's currentStyle.textTransform property is being set correctly, as you can prove using the following:

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

So we conclude it's a rendering bug in IE 8. I've found a workaround, which is not to apply text-transform on the default state, which is upper case. So using my class-switching code and changing your CSS to

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

... will fix it.

Answer 2

I would try to use jquery and basically have all the keys lowercased and have css class

.Upper {text-decoration:uppercase; }

than the following code should work

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

Actually i have almost the same stuff, but not with text decoration property, and IE8 do update appearance of DOM elements on toggleClass Probably otherwise you should look what jQuery do on toggleClass in order to make it cross browser

Answer 3

I have that situation with IE8. My solution is:

tgrafico.className ="teclado_grafico mayuscula";

NOT throught setAttribute('className'...

I don't know why this is that.

P.S. Sorry my english... :)