Справочные данные JavaScript
Объект style
Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы:
* задающие стиль документа
и
* относящиеся к самому объекту style.
Свойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не соответстуют соглашению об именах JavaScript, а первые буквы всех слов, образующих имя атрибута, кроме первого, делаются прописными. В следующей таблице показаны примеры преобразования имен атрибутов стиля в имена свойств объекта style, устанавливающих стиль элемента.
Атрибут стиля Свойство объекта
background-attachment backgroundAttachment
borderBottomColor
font-family fontFamily
z-index zIndex
По аналогии вы можете преобразовать все атрибуты стилей в свойства объекта style. Все не относящееся к стилю свойства объекта style перечислены в нижерасположенной таблице. Кроме того, у этого объекта имеются методы getAttribute, removeAttribute и setAttribute. Но эти дополнительные свойства и методы поддерживаются только IE начиная с 4.0
Свойство Описание
cssText текстовое представление стиля (параметр атибута STYLE).
pixelHeight Высота элемента в пикселах.
pixelLeft Смещение левого края элемента в пикселах.
pixelTop Смещение верхнего края элемента в пикселах.
pixelWidth Ширина элемента в пикселах.
posHeight Высота элемента в тех единицах измерения, в которых она была установлена в определении стиля.
posLeft Смещение левого края элемента в тех единицах измерения, в которых она была установлена в определении стиля.
posTop Смещение верхнего края элемента в тех единицах измерения, в которых она была установлена в определении стиля.
posWidth Ширина элемента в тех единицах измерения, в которых она была установлена в определении стиля.
Работа с объектом style
Объект style позволяет изменить стиль любого элемента Web-страницы, просто присвоив нужному свойству необходимое значение.
paragraph1.style.fontSize = 7;
Можно изменить геометрические размеры элемента:
image1.style.height = "100mm"; image1.style.width = "120mm";
и его месторасположение:
iamge1.style.top = "200px"; image1.style.left = "50px";
Заметьте, что мы присваиваем свойству строковые значения геометрических параметров с указанием единицы измерения. Это не очень удобно для вычислений, поэтому объект style предоставляет свойства pixel, принимающие и возвращающие числовые значения в пикселах:
image1.style.pixelHeight = 400; iamge1.style.pixelLeft +=5;
Также можно использовать свойства pos, возвращающие и принимающие числовые значения в тех единицах измерения, в которых эти значения были заданы в определении стиля.
<IMG src="/image1.gif" id="image1" style="height: 100mm; width: 100">
nheight = image1.style.posHeight; // Значение в миллиметрах
nwidth = image1.style.posWidth; // Значение в пикселах
Вы можете использовать методы getAttribute, setAttribute и removeAttribute для получения и установки значения и удаления какого-либо свойства стиля:
paragraph1.style.setAttribute("borderBottomWidth", 5, false);
paragraph1.style.removeAttribute("borderTopWidth", false);
Объект style в Internet Explorer
Как же получить доступ к объекту style? Internet Explorer предоставляет для этого три свойства: style, currentStyle и runtimeStyle.
Первое свойство позволяет получить доступ к стилю, встроенному в тег элемента с помощью атрибута STYLE:
<P id="par1" style="color: green">Любой текст</P> someColor = par1.style.color;
Вышеприведенное выражение поместит в переменную someColor значение атрибута color встроенного стиля элемента, т.е. "green".
someFontSize = par1.style.fontSize;
Это выражение вернет null, даже если где-то в таблице стилей атрибут font-size для этого элемента определен. А все потому, что интересы свойства style не выходят за рамки встроенного ситиля.
Чтобы получить стиль элемента с учетом и встроенных стилей, и таблиц стилей, и атрибутов тега, используйте свойство currentStyle:
<FONT id="par1" style="color: green" size="7">Любой текст</FONT>
someColor = par1.currentStyle.color;
someBColor = par1.currentStyle.backgroundColor;
someFontSize = par1.currentStyle.fontSize;
someOther = par1.currentStyle.textDecoration;
Предположим, что где-то в таблице стилей определен для этого элемента атрибут background-color, равный "teal", а text-decoration не определен вообще. Эти выражения вернут следующие значения: первое - "green", второе - "teal", третье - "largest" (или "7"), а четвертое - "none"? т.е. значение по умолчанию для этого атрибута стиля.
Если вы измените какое-либо свойство объекта style, измениться то же свойство и у объекта currentStyle, и наоборот. Единственная деталь: если вы изменили какое-либо свойство currentStyle и потом сразу же обратились к нему, вернется старое значение. То есть, между присвоением значения и его применением к элементу должно пройти некоторое время.
Свойство runtimeStyle довольно странное. Оно возвращает ссылку на объект runtimeStyle, который является примерно тем же самым, что и currentStyle, но присвоение его свойствам новых значений не затригивает аналогичных свойств style. То есть, вы можете переопределить свойства стиля runtimeStyle, и соответствующие свойства style (но не currentStyle) не изменятся.
[править] Объект styleSheet и коллекция styleSheets
Объект document в IE имеет встроенную коллекцию styleSheets, которую можно использовать для доступа к отдельным таблицам стилей документа. А отдельная таблица стилей представляется объектом styleSheet:
address = document.styleSheets[1].href;
Для нас будут полезны три свойства объекта таблицы стилей.
Первое из них - это href, представляющее интернет-адресс файла внешней таблицы стилей. Вы можете изменить этот адрес, чтобы загрузить другую таблицу стилей.
Второе - disabled, разрешающее или запрещающее Web-обозревателю применять эту таблицу для форматирования документа. Заметьте, что в данном случае false разрашает применение таблицы, а true запрещает.
И последнее свойство - type - имеет для нас только теоретический интерес: оно задает тип таблицы стилей, который для IE всегда равен "text/css".
По материалам сайта: http://www.spravkaweb.ru/
