Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / JavaScript /
JavaScript и CSS
Если вы уже умеете создавать сайты, то вы наверняка знаете, что такое CSS. Ну а если не знаете, то узнать можете здесь. Я же сегодня в CSS не буду погружаться даже кратко, дабы не тратить на это время. Поскольку речь сегодня пойдёт о том, как с помощью JavaScript работать с CSS.
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
Изменение стилей CSS через JavaScript позволяет динамически управлять цветом, шрифтом и другими элементами оформления. Стили дают возможность устанавливать и изменять размер элементов, а также скрывать или показывать их. Это значит, что технология DHTML может использоваться для создания анимированных переходов, когда, например, содержимое документа «выплывает» из-за границ экрана или структурированный список разворачивается и сворачивается, благодаря чему пользователь может управлять объемом выводимых данных.
Главное в DHTML – возможность динамически при помощи JavaScript изменять атрибуты стиля, применяемые к отдельным элементам документа. Вот здесь и здесь я кратко рассказал о том, как использовать модель DOM API для получения ссылок на элементы документа по имени тега, идентификатору или по номеру.
Получив ссылку на элемент, стилями которого вы хотите управлять, вы
устанавливаете свойство style элемента, чтобы получить объект
CSS2Properties для данного элемента документа. Этот объект JavaScript имеет свойства, соответствующие всем атрибутам стилей CSS. Эти атрибуты можно читать, а можно и записывать, тем самым изменяя стили.
Пример:
function HideH2()
{
//Находим все заголовки Н2
var h2 = document.getElementsByTagName("h2");
//Перебираем все заголовки Н2
for(var i = 0; i < h2.length; i++)
{
//Скрываем заголовок Н2
h2[i].style.visibility = "hidden";
}
}
Здесь мы находим в документе все заголовки H2. Затем перебираем найденные заголовки в цикле и делаем их невидимыми.
CSS атрибуты в JavaScript
В именах многих атрибутов стилей CSS, таких как font-family, содержатся дефисы. В JavaScript дефис понимается как знак минус, поэтому нельзя использовать, например, такое выражение:
element.style.font-family = "sans-serif";
Таким образом, имена свойств объекта CSS2Properties
немного отличаются от имен настоящих атрибутов CSS. Если имя атрибута CSS
содержит дефисы, то имя свойства объекта CSS2Properties
образуется путем удаления дефисов и перевода в верхний регистр буквы,
непосредственно следующей за каждым из них. То есть, атрибут
border-left-width доступен через свойство borderLeftWidth,
а к атрибуту font-family можно обратиться так:
element.style.fontFamily = "sans-serif";
Есть еще одно отличие между именами атрибутов CSS и свойств объекта
CSS2Properties в JavaScript. Слово float
является ключевым в Java и других языках, и хотя сейчас это слово не
употребляется в JavaScript, оно зарезервировано на будущее. Поэтому в объекте
CSS2Properties не может быть свойства с именем float,
соответствующего атрибуту CSS float.
Если очень надо использовать этот атрибут, то можно добавить префикс css
к атрибуту float. То есть у нас получится имя свойства cssFloat,
и значение атрибута float элемента можно установить или получить
при помощи свойства cssFloat объекта CSS2Properties.
Свойства стилей в JavaScript
При работе со свойствами стилей объекта CSS2Properties
следует помнить, что все значения должны быть указаны в виде строк.
В таблице стилей или атрибуте style можно написать:
position: absolute; font-family: arial; background-color: #eeeeee;
Чтобы сделать то же самое для элемента x в JavaScript, необходимо поместить
все эти значения в кавычки:
x.style.position = "absolute"; x.style.fontFamily = "arial"; x.style.backgroundColor = "#eeeeee";
Обратите внимание, что точки с запятыми остаются вне строк. Это обычные точки с запятой, употребляемые в синтаксисе языка JavaScript. Точки с запятой, используемые в таблицах CSS-стилей, не нужны в строковых значениях, устанавливаемых с помощью JavaScript.
Кроме того, во всех свойствах координат или размеров должны быть
указаны единицы измерения. То есть нельзя устанавливать свойство
left подобным образом:
x.style.left = 300; //Нельзя: это число, а не строка x.style.left = "300"; //Нельзя: отсутствуют единицы измерения
Единицы измерения обязательны при установке свойств стиля в JavaScript –
так же, как при установке атрибутов стиля в таблицах стилей. Далее
приводится правильный способ установки значения свойства left
элемента х равным 300 пикселов:
x.style.left = "300px";
Если для свойства необходимо установить значение, которое получается в итоге вычислений, то необходимо добавить единицы измерения в конце выражения:
x.style.left = (x0 + 100) + "px";
При такой записи добавление строки преобразует вычисленное значение из числа в строку.
Объект CSS2Properties может также использоваться для получения
значений атрибутов CSS, явно установленных в атрибуте style элемента, или для чтения любых встроенных значений стилей, ранее установленных кодом на JavaScript.
Однако и здесь необходимо помнить, что значения, полученные из этих свойств,
представляют собой строки, а не числа, поэтому следующий код
(предполагающий, что для элемента x с помощью встраиваемых стилей установлены поля) не делает того, что от него, возможно, ожидалось:
var totalMarginWidth = x.style.marginLeft + x.style.marginRight;
А вот такой код будет работать правильно:
var totalMarginWidth = parseInt(x.style.marginLeft) +
parseInt(x.style.marginRight);
Это выражение просто отбрасывает единицы измерения, возвращаемые в конце
обеих строк. В нем предполагается, что свойства marginLeft и
marginRight заданы с одинаковыми единицами измерения. Если во встроенных стилях в качестве единиц измерения указаны исключительно пикселы, то, как правило, можно обойтись простым отбрасыванием единиц измерения, как в данном примере.
О работе с CSS можно рассказывать ещё очень долго. Возможно, я буду возвращаться к этому вопросу. Но для начала сведений достаточно. А если хотите как следует изучить JavaSCript, а также jQuery и Ajax, то вам сюда:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>