Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Смена свойства CSS

Автор: dreamReckless 27.12.2012, 08:59

К примеру есть div с классом (label).
Как с помощью javascript изменить свойство, как цвет к примеру? Но загвоздка в том, что я имею ввиду изменение цвета без действия пользователя - то цвет меняется автоматически, с интервалом. Но интересен именно сам процесс.

Вот сам div:

Код


<div class = "label"   >А ведь здесь то, просто текст!</div>

И сам стиль (класс):

Код


.label { 
    color: white;
    font-family: 'Lobster', cursive;
    font-size: 400%; /* размер шрифта */
    position: absolute; /* Абсолютное позиционирование */
    left: 20%;
    top: 8%
   }

Вот здесь и интересует, как в автоматическом режиме менять свойство css на заданное (в скрипте)..

Автор: skyboy 27.12.2012, 09:33

самое простое — менять свойство style.color

Автор: Aliance 27.12.2012, 10:38

Цитата(dreamReckless @ 27.12.2012, 09:59

)

я имею ввиду изменение цвета без действия пользователя - то цвет меняется автоматически, с интервалом.

Сперва определи для себя четко алгоритм, что нужно. Если нужно после загрузки страницы каждые N секунд менять цвет div`а, то просто:

Код


window.onload = function() {
   setInterval('document.getElementById("labelDiv").style.color = "#f00";', N * 1000); // N - число секунд
}

getElementById для простоты, по классу получать элементы нужно другим способом.

Автор: dreamReckless 27.12.2012, 11:03

Интересует ф-ция на javascript, которая с интервалом будет плавно (!) менять цвет у div (!).
Возможно ли это?
А вообще интересует некое.. чтобы к примеру как то изменялись на ходу таблицы стилей.

То есть какая-то ф-ция (javascript), которая будет к примеру у div изменять шрифт, цвет, фон, или еще что то через определенный промежуток времени, плавно.

То есть хотелось бы как бы брать другие "строчки" (css) и вставлять "онлайн" в текущие стили, которые сразу бы применялись ("строчки"). Это возможно, или фантастика?

Автор: Aliance 27.12.2012, 12:22

Возможно. Но нативной функции под это дело нет. Варианта три:
1) писать свою
2) искать чужую
3) использовать jQuery/etc

Я бы выбрал третий вариант, там это делается одной строчкой (смотреть в сторону jQuery.animate).

Автор: skyboy 27.12.2012, 12:47

http://www.impressivewebs.com/css3-transitions-javascript/

Автор: dreamReckless 29.12.2012, 01:15

Спасибо!