Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

е.style.left = "300px";

Чтобы установить свойство

left
равным вычисляемому значению, обязательно добавьте единицы измерения в конце вычислений:

е.style.left = (х0 + left_margin + left_border + left_padding) + "px";

Как побочный эффект, добавление строки с единицами измерения преобразует вычисленное значение из числа в строку.

Соглашения об именах: CSS-свойства в JavaScript

Многие CSS-свойства стиля, такие как

font-size
, содержат в своих именах дефис. В языке JavaScript дефис интерпретируется как знак минус, поэтому нельзя записать выражение, приведенное ниже:

е.style.font-size = "24pt"; // Синтаксическая ошибка!

Таким образом, имена свойств объекта

CSSStyleDeclaration
слегка отличаются от имен реальных CSS-свойств. Если имя CSS-свойства содержит дефисы, имя свойства объекта
CSSStyleDeclaration
образуется путем удаления дефисов и перевода в верхний регистр буквы, непосредственно следующей за каждым из них. Другими словами, CSS-свойство
border-left-width
доступно через свойство
borderLeftWidth
, а к CSS-свойству
font-family
можно обратиться следующим образом:

е. style. fontFamily = "sans-serif;

Кроме того, когда CSS-свойство, такое как

float
, имеет имя, совпадающее с зарезервированным словом языка JavaScript, к этому имени добавляется префикс «css», чтобы создать допустимое имя свойства объекта
CSSStyleDeclaration
. То есть, чтобы прочитать или изменить значение CSS-свойства
float
элемента, следует использовать свойство
cssFloat
объекта
CSSStyleDeclaration
.

**********************************

Напомню, что некоторые CSS-свойства, такие как

margin
, представляют собой сокращенную форму записи других свойств, таких как
margin-top, margin-right, margin-bottom
и
margin-left
. Объект
CSSStyleDeclaration
имеет свойства, соответствующие этим сокращенным формам записи свойств. Например, свойство
margin
можно установить следующим образом:

е.style.margin = topMargin + "рх " + rightMargin + "рх " +

bottomMargin + "рх ” + leftMargin + "рх";

Хотя, возможно, кому-то будет проще установить четыре свойства полей по отдельности:

е.style.marginTop = topMargin + "рх";

е.style.marginRight = rightMargin + "рх";

e.style.marginBottom = bottomMargin + ”px";

e.style.marginLeft = leftMargin + "px";

Атрибут

style
HTML-элемента - это его встроенный стиль, и он переопределяет любые правила стилей в таблице CSS. Встроенные стили в целом удобно использовать для установки значений стиля, и именно такой подход использовался во всех примерах выше. Сценарии могут читать свойства объекта
CSSStyleDeclaration
, представляющего встроенные стили, но они возвращают осмысленные значения, только если были ранее установлены сценарием на языке JavaScript или если HTML-элемент имеет встроенный атрибут
style
, установивший нужные свойства. Например, документ может включать таблицу стилей, устанавливающую левое поле для всех абзацев равным 30 пикселам, но если прочитать свойство
leftMargin
одного из этих элементов, будет получена пустая строка, если только этот абзац не имеет атрибут
style
, переопределяющий значение, установленное таблицей стилей.

Чтение встроенного стиля элемента представляет особую сложность, когда выполняется чтение свойств стиля, имеющих единицы измерения, а также свойств сокращенной формы записи: сценарий должен включать далеко не простую реализацию синтаксического анализа строк с CSS-стилями, чтобы обеспечить возможность извлечения и дальнейшего использования значений. В целом, встроенный стиль элемента удобно использовать только для установки стилей. Если сценарию потребуется получить стиль элемента, лучше использовать вычисленные стили, которые обсуждаются в разделе 16.4.

Иногда бывает проще прочитать или записать единственную строку во встроенный стиль элемента, чем обращаться к объекту

CSSStyleDeclaration
. Для этого можно использовать методы
getAttribute
и
setAttribute
объекта
Elemen
t или свойство
cssText
объекта
CSSStyleDeclaration
:

// Обе инструкции, следующие ниже, записывают в атрибут style

  • Читать дальше
  • 1
  • ...
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: