IE6 / 7 и ClassName (JS / HTML) - PullRequest
Новая
       11

IE6 / 7 и ClassName (JS / HTML)

1 голос
/ 22 апреля 2009

Я пытаюсь изменить класс элемента, используя JavaScript. Пока что делаю: 

var link = document.getElementById("play_link");
link.className = "play_button";

edit : вот фактический код, который заменяет имя класса

В HTML: 

<a href="#play_link_<%=i%>" id="play_link_<%=i%>"onclick="changeCurrentTo(<%=i%>);return false;" class="play_button"></a>

В JavaScript function changeCurrentTo (id) { activatePlayButton (current_track); current_track = id; inactivatePlayButton (current_track); } 

function inactivatePlayButton(id){
    document.getElementById("recording_"+id).style.backgroundColor="#F7F2D1";
    var link = document.getElementById("play_link_"+id);
    link.className="stop_button";
    link.onclick = function(){stopPlaying();return false;};
}

function activatePlayButton(id){
    document.getElementById("recording_"+id).style.backgroundColor="";
    var link = document.getElementById("play_link_"+id);
    link.className = "play_button";
    var temp = id;
    link.onclick = function(){changeCurrentTo(temp);return false;};
}

с 

.play_button{
    background:url(/images/small_play_button.png) no-repeat;
    width:25px;
    height:24px;
    display:block;
}

старый класс 

.stop_button{
    background:url(/images/small_stop_button.png) no-repeat;
    width:25px;
    height:24px;
    display:block;
}

Контекстом является музыкальный проигрыватель. Когда вы нажимаете кнопку воспроизведения (треугольник), она превращается в кнопку остановки (квадрат) и заменяет вызываемую функцию.

Проблема в том, что класс изменился, но в IE6 и 7 новый фон (здесь /images/small_play_button.png) не отображается сразу. Иногда это даже не отображается вообще. Иногда он не отображается, но если я немного трясу мышью, он отображается.

Отлично работает в FF, Chrome, Opera и Safari, так что это ошибка IE. Я знаю, что сложно сказать сразу только из этой информации, но если бы я мог получить некоторые указания и указания, которые были бы полезны.

1028 * Благодарения и *

Ответы [ 3 ]

3 голосов
/ 22 апреля 2009

Вы должны создать одно изображение шириной 50px и высотой 24px, где у вас есть и игровая партия, и партия остановки. Затем вы просто настраиваете положение фона следующим образом: 


.button
{
    background-image: url(/images/small_buttons.png);
    bacground-repeat: no-repeat;
    width: 25px;
    height: 24px;
    display: block;
}

.play_button
{
    background-position: left top;
}

.stop_button
{
    background-position: right top;
}

Затем вы загружаете «оба изображения» одновременно, и при изменении того, какая часть изображения отображается, задержки не произойдет.

Обратите внимание, что я создал новый класс CSS, так что вам не нужно повторять ваш CSS для разных кнопок. Теперь вам нужно применить два класса к вашему элементу. Пример: 

<div class="button play_button"></div>
0 голосов
/ 31 августа 2009

Трудно сказать точную разметку, но проблема исчезающего фонового изображения в IE, вероятно, решается добавлением объявления position: relative; в класс .button и / или в его родительский div.

0 голосов
/ 22 апреля 2009

Вам нужно использовать setAttribute в ваших двух функциях. Попробуйте это:
link.setAttribute((document.all ? "className" : "class"), "play_button");
link.setAttribute((document.all ? "className" : "class"), "stop_button");

...