Как работать с css свойствами?
 

У меня есть див, у дива есть класс, у класса есть свойства. Хочу, чтобы по нажатию на див свойство color класса перезагружалось. То есть был у меня, попустим, белый див, по нажатию этот конкретный див становится чёрным. А не белый див - менял цвет, допустим, на зелёный. А остальные дивы этого же класса оставались как есть. Всё бы ничего - дивы прекрасно меняют цвет. Да только изначально у дивов нет свойства style.background, хотя при присвоении белый див культурно... зеленеет. Потому что изначально белый див белым не является, он вообще бесцветный. Вот код:

function chageColor(){tmp=document.getElementById("div1");
    tmp.style.background =  (tmp.style.background == "white") ? "black" : "green";
}

<div class="someClass" id="div1" onclick="changeColor()"></div>'

css класса someClass {background: white;}
Собственно вопрос - как из чистого js работать с css свойствами, чтобы они вели себя ожидаемым образом? Если в стилях свойство есть, то чтобы оно выбиралось в переменную, а если нет - то на нет и суда нет? Плюс, чтобы и в обратную строну можно было - установить либо каким-либо set-ом, либо просто присвоить?

Upd: задаю в другой функции для div1 - style.background, свойство есть. но не совсем понятно, почему если я его (style.background="#cff"; ) сравниваю с тем же значением (tmp.style.background=="#cff"; ) в chageColor() он даёт false. alert выдаёт цвет в формате rgb(204,255,255) Какой функцией преобразовывать строку, чтобы сравнение давало нужный результат?

Аня C,

Лучше всего делать проверку не на определенное свойство у стиля, а на класс. Т.е. :

<div class="someClass white" id="div1" onclick="changeColor()"></div>
<div class="someClass green" id="div2" onclick="changeColor()"></div>
<div class="someClass black" id="div3" onclick="changeColor()"></div>

if(element.className.indexOf('white') != -1) { // присваем другой класс}

А в css указываем необходимые свойства:

.white
{
background-color: white !important;
}

Nekromancer,
Спасибо, помогли понять результаты тестов.
Hoshinokoe,
Спасибо за элегантное решение.

Hoshinokoe,

<div class="someClass black-and-white" id="div3" onclick="changeColor()"></div>

да, и

alert( ~'text lalala 12 lalala text'.indexOf( '12' ) );

nerv_,
:)

classList

только что хотел сказать про него :)

Nekromancer, melky, вы IE совсем похоронили? )

я уже вместо креста на его могилке поставил туда буквы POLYFILL.

nerv_,
я например совсем похоронил 6 и 7. В восьмом через прототипы полифилы действительно замечательно работают. Только у нас в проекте классы вообще не используются, по этому я не писал его :)

пожалуйста, осторожнее используйте новые термины в разговорах с нубами :D Что такое
?

nerv_,
Это ты себя нубом назвал? Ну polyfill он же shim/shiv есть как правило скрипт, который эмулмрует работу той или иной фичи в браузерах, которые ее не поддерживают.

аха )
спасибо, буду знать :) Уже использую es5-shim

nerv_,
Да, мы тоже используем :)