Согласие на обработку персональных данных.

09.07.2020
Новые видео и статья Операторы != и == против операторов !== и ===.

04.07.2020
Новый выпуск журнала Автоматизация и Программирование.

15.06.2020
Новые видео и статья JavaScript и CSS.

10.06.2020
Новые видео и статья Как в С++ получить от пользователя строку с пробелами.

08.06.2020
Новый выпуск журнала Автоматизация и Программирование.



Раздел: Сайтостроение / JavaScript /

JavaScript и CSS

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Если вы уже умеете создавать сайты, то вы наверняка знаете, что такое 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 с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика