HTML+CSS+JavaScript

на странице много тегов span, у половины класс а , у второй класс б, при клике на ссылку с id=change, надо чтоб спаны махнулись классами, подскажите как.

Как-то так:

<a id="change" onclick="func()">Click me</a> <script> function func() { var obj=document.getElementsByTagName('span'); for (var i=0;i<obj.length;i++) { if(obj[i].class=="a") obj[i].class="b"; if(obj[i].class=="b") obj[i].class="a"; } } </script>

только не class, а className

<a id="change" onclick="func()">Click me</a> <script> function func() { var obj=document.getElementsByTagName('span'); for (var i=0;i<obj.length;i++) { if(obj[i].className=="a") obj[i].className="b"; if(obj[i].className=="b") obj[i].className="a"; } } </script>

только не class, а className - вот тут меня как-раз сомнение и брало... Но ведь стили я назначаю именно по class:
<span class="a">Text</span>
Почему тогда в скрипте нужно использовать className ???

спецификация такая. правильно использовать className.

http://www.w3schools.com/jsref/prop_html_classname.asp

Спасибо, классы вроде меняються, но в некоторых спанах непонятно почему добавляеться
style="color: серый", такой же цвет шрифта устанавливаеться, как и бэграунд таблицы, внутри которой эти спаны и соответственно текст не виден. Откуда береться этот style. В html его и подавно нет.?

То есть и в скриптах, и в html правильно использовать className вместо class?

jQuery("#change").click(function(){jQuery("span").toggleClass("a").toggleClass("b");return false})

Эта строка по приятней выглядит, и это уже то, что и хотелось (в смысле jQuery), но опять же все элементы меняют класс как надо, но у некорых появляеться

<span class="en" style="color: rgb(134, 141, 149);"> слон</span>

вот такой style, который все портит

Уточню что меняються классы с en на ru, видим что слово внутри спана русское, а класс en, тоесть класс нормально поменялся, а этот стиль непонятно откуда взялся и задал слову цвет , как фон. Что за мазефака

Вот это весь файл jQery

$(function() {     $('td').mouseover(function(){                                   $(this).css('background','#008000').children('span.ru').css('color', '#FFFF99');                                });          $('td').mouseout(function(){                                   $(this).css('background','#868D95').children('span.ru').css('color', '#868D95');                                })          jQuery("#change").click(function(){jQuery("span").toggleClass("ru").toggleClass("en");return false})       })

Получаеться , что при наведении и уходе мышки спанам задаються стили в html-разметке,
и это портит всю картину при смене классов, как этого избежать, подскажите.

<style>
.f{color:#FFFF99}
</style>

$(function() {      $('td').mouseover(function(){                                    $(this).css('background','#008000').children('span.ru').addClass('f');                                 });            $('td').mouseout(function(){                                    $(this).css('background','#868D95').children('span.ru').removeClass('f');                                 })            jQuery("#change").click(function(){jQuery("span").removeClass('f').toggleClass("ru").toggleClass("en");return false})         })

Спасибо, то что надо.