Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.10.2012, 18:24
Новичок на форуме
Отправить личное сообщение для Аня C Посмотреть профиль Найти все сообщения от Аня C
 
Регистрация: 25.09.2012
Сообщений: 5

Как работать с 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, 14.10.2012 в 18:39. Причина: допиливание напильником
Ответить с цитированием
  #2 (permalink)  
Старый 14.10.2012, 18:33
Аватар для Nekromancer
Профессор
Отправить личное сообщение для Nekromancer Посмотреть профиль Найти все сообщения от Nekromancer
 
Регистрация: 06.05.2009
Сообщений: 1,163

http://javascript.ru/blog/Andrej-Par...cheniya-stilya
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2012, 18:42
Профессор
Отправить личное сообщение для Hoshinokoe Посмотреть профиль Найти все сообщения от Hoshinokoe
 
Регистрация: 08.01.2012
Сообщений: 253

Аня 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;
}
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2012, 18:50
Новичок на форуме
Отправить личное сообщение для Аня C Посмотреть профиль Найти все сообщения от Аня C
 
Регистрация: 25.09.2012
Сообщений: 5

Nekromancer,
Спасибо, помогли понять результаты тестов.
Hoshinokoe,
Спасибо за элегантное решение.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2012, 21:35
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

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

да, и
alert( ~'text lalala 12 lalala text'.indexOf( '12' ) );
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук

Последний раз редактировалось nerv_, 14.10.2012 в 21:42.
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2012, 21:37
Аватар для Nekromancer
Профессор
Отправить личное сообщение для Nekromancer Посмотреть профиль Найти все сообщения от Nekromancer
 
Регистрация: 06.05.2009
Сообщений: 1,163

nerv_,


classList
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2012, 22:12
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Nekromancer
classList
только что хотел сказать про него
Ответить с цитированием
  #8 (permalink)  
Старый 14.10.2012, 22:45
Аватар для nerv_
junior
Отправить личное сообщение для nerv_ Посмотреть профиль Найти все сообщения от nerv_
 
Регистрация: 29.11.2011
Сообщений: 3,924

Nekromancer, melky, вы IE совсем похоронили? )
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
Ответить с цитированием
  #9 (permalink)  
Старый 14.10.2012, 22:51
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от nerv_
Nekromancer, melky, вы IE совсем похоронили? )
я уже вместо креста на его могилке поставил туда буквы POLYFILL.
Ответить с цитированием
  #10 (permalink)  
Старый 14.10.2012, 23:06
Аватар для Nekromancer
Профессор
Отправить личное сообщение для Nekromancer Посмотреть профиль Найти все сообщения от Nekromancer
 
Регистрация: 06.05.2009
Сообщений: 1,163

nerv_,
я например совсем похоронил 6 и 7. В восьмом через прототипы полифилы действительно замечательно работают. Только у нас в проекте классы вообще не используются, по этому я не писал его
__________________
Нужно равняться на лучших, а не оправдываться за счёт худших.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как работать с процетами? Arkinsstoun Общие вопросы Javascript 3 08.02.2012 01:04
Как "заморозить" конечный результат css анимации? FINoM Общие вопросы Javascript 8 28.12.2011 17:52
Как получить атрибут из CSS файла ? sionus Events/DOM/Window 1 04.01.2010 09:39
css как подавить внешние стили warobushek (X)HTML/CSS 3 22.11.2009 13:17
Как создать ассоциативный массив JS + CSS occlusion Общие вопросы Javascript 3 12.01.2009 09:19