代码之家 › 专栏 › 技术社区 › Alfabravo

IE8 v8不更改DOM元素的类,尽管JS函数更改了元素属性

dhtml internet-explorer-8 css javascript

0

Alfabravo · 技术社区 · 16 年前

键盘本身的位置如下:

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

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;红色素;FF 3、3.5和3.6;野生动物园4,。。。但是在ie8v8(严格模式)中,类没有改变!我的意思是,用IE8工具调试可以让人看到属性className在那里,并且它会改变。。。但是用户看不到字母从大写变为小写,再变为大写。

我只是不知道怎么处理。。。我抱怨客户使用IE6。。。现在他们更新了他们的东西,这就出现了。任何帮助都会很有帮助!

编辑已经试过了

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

但还没有快乐。打开ie8dev的工具可以在HTML选项卡中看到类在预期的值之间正确地变化,但是浏览器就是不工作!

3 回复 | 直到 16 年前

1

vittore 16 年前

.Upper {text-decoration:uppercase; }

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

事实上,我有几乎相同的东西,但不是与文字装饰属性,和IE8 做否则,您应该看看jQuery在toggleClass上做了什么,以便使它跨浏览器运行

2

Tim Down 16 年前

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>

text-transform 默认状态为大写。所以用我的类转换代码把你的CSS改成

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

... 会修好的。

3

0

DeniZ 16 年前

tgrafico.className=“teclado\u grafico mayuscula”;

未通过setAttribute('className'。。。

我不知道为什么会这样。