Сегодня продолжаем наше знакомство с замечательной библиотекой jquery. Рассмотрим возможность изменять css стили объектов на HTML странице «на лету»

Для образца возьмем div-объект:

<div id = "box"></div>

И применим для него css-стили:

<style type="text/css">
#box {
        background: #6699FF;
    height: 100px;
    width: 100px;
    position: relative;
}
</style>

В итоге синий квадрат 100 на 100.
Подключаем библиотеку jquery:

<script language="JavaScript" src="jquery-1.2.6.pack.js" /></script>

И программная часть (изменение css стилей при помощи jQuery):

<script type="text/javascript">
$(document).ready(function(){ //если DOM готов
   $("#box").css("background-color", "black" ); //изменяем css объекта с id #box, меняем
//значение свойства background-color на black. В качестве параметра можно передать как
//цвет в английском формате, так и код цвета.
      return false;
});
</script>

Кстати, необязательно использовать событие click() , или, как показано в примере выше вообще изменять css не по событию. Можно например изменить css объекта, если над ним проехалась мышь. Например так:

$("p").mouseover(function () {
$(this).css("color","red");
});