ЛАБОРАТОРНАЯ РАБОТА №8
Управление стилями объектов.
Теоретическая часть:
Функция $ позволяет упростить обращение к объектам браузера.
document.getElementById('MyDiv') будем заменять на $('MyDiv')
Функция $ обязательно должна присутствовать в файле со скриптами.
function
$()
{
var elements = new Array();
for
(var i = 0; i < arguments.length; i++)
{
var element = arguments[i];
if
(typeof element == 'string')
element
= document.getElementById(element);
if
(arguments.length == 1)
return
element;
elements.push(element);
}
return
elements; }
Из
программы на JavaScript
мы
можем управлять всеми свойствами
объектов браузера. Ниже приведена
таблица свойств и их аналогов в свойствах
JavaScript
объектов.
Синтаксис выглядит так:
$('MyDiv').style.backgroundColor='blue';
|
CSS свойство |
JavaScript аналог |
|---|---|
|
background |
|
backgroundAttachment |
|
backgroundColor |
|
backgroundImage |
|
backgroundPosition |
|
backgroundRepeat |
|
border |
|
borderBottom |
|
borderBottomColor |
|
borderBottomStyle |
|
borderBottomWidth |
|
borderColor |
|
borderLeft |
|
borderLeftColor |
|
borderLeftStyle |
|
borderLeftWidth |
|
borderRight |
|
borderRightColor |
|
borderRightStyle |
|
borderRightWidth |
|
borderStyle |
|
borderTop |
|
borderTopColor |
|
borderTopStyle |
|
borderTopWidth |
|
borderWidth |
|
clear |
|
clip |
|
color |
|
cursor |
|
display |
|
filter |
|
font |
|
fontFamily |
|
fontSize |
|
fontVariant |
|
fontWeight |
|
height |
|
left |
|
letterSpacing |
|
lineHeight |
|
listStyle |
|
listStyleImage |
|
listStylePosition |
|
listStyleType |
|
margin |
|
marginBottom |
|
marginLeft |
|
marginRight |
|
marginTop |
|
overflow |
|
padding |
|
paddingBottom |
|
paddingLeft |
|
paddingRight |
|
paddingTop |
|
pageBreakAfter |
|
pageBreakBefore |
|
position |
|
styleFloat |
|
textAlign |
|
textDecoration |
|
textDecorationBlink |
|
textDecorationLineThrough |
|
textDecorationNone |
|
textDecorationOverline |
|
textDecorationUnderline |
|
textIndent |
|
textTransform |
|
top |
|
verticalAlign |
|
visibility |
|
width |
|
zIndex |
Пример решения задачи.
Условие: Для выведенного блока MyDiv изменить ширину и высоту, установить новое значение для цвета рамки и для цвета фона.
Решение:
1) Фаил lab8.html
<!doctype html>
<html>
<head>
<title>lab8</title>
<link rel="stylesheet" href="8.css">
<script src="script8.js">
</script>
</head>
<body onload="f()">
<div id="MyDiv">
</div>
</body>
</html>
2) Фаил 8.css
#MyDiv{border: solid red 20px;
width: 200px;
height:200px; }
3) Фаил script8.js
function $()
{ var elements = new Array();
for (var i = 0; i < arguments.length; i++)
{ var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements; }
function f()
{
alert('Пауза');//Смотрим на первоначальные размеры блока mydiv
$('MyDiv').style.height='95px';
$('MyDiv').style.width='300px';
alert('Ширина=' + $('MyDiv').style.width); //выведем значение ширины блока mydiv
$('MyDiv').style.borderColor='green';
$('MyDiv').style.backgroundColor='yellow';
}
Позиционирование элементов сайта
Профессиональные разработчики web, хотели бы иметь более гибкий (пусть, при этом, и более сложный) инструмент размещения материалов в документе. Профессионал готов мириться с некоторыми техническими трудностями, ради возможности напрямую влиять на процесс форматирования документа, как это делается в издательских системах.
Именно эту возможность и предоставляет CSSP (Cascading Style Sheets Positioning). CSSP - это технология, позволяющая произвольным образом размещать элементы HTML-документа.
С одной стороны, CSSP является частью технологии CSS, которую мы уже рассматривали. Все свойства CSSP - это просто расширение набора свойств CSS. С другой стороны, это настолько важная самостоятельная вещь, что W3 консорциум выделил спецификации CSSP в отдельный стандарт Positioning HTML Elements with Cascading Style Sheets.
Повторимся, что CSSP - это инструмент профессионала. Для создания странички с Вашей фотографией и текстом типа "Меня зовут Вася", никакого CSSP не нужно, поэтому, подавляющее большинство авторов не знают что это такое (и не нуждаются в таком знании).
Терминология
Очень важным в HTML является понятие элемента. Элементом является любая часть документа, заключенная в самостоятельный тэг. Так, элементом является сам документ, любой раздел, блок, изображение, таблица и т.д.
В принципе, CSSP позволяет управлять размещением любого элемента. Однако, эта возможность сильно зависит от используемого браузера (особенно, когда дело доходит до динамического изменения документа) и применять ее на практике несколько затруднительно. Поэтому, введем еще один термин - элемент позиционированния. Это элемент, который позиционируется одинаково (или, почти одинаково) в обоих распространенных браузерах.
Элементами позиционированния являются сам документ, разделы документа (заключенные в пару тэгов <DIV> ... </DIV>) и части документа, выделенные тэгом <SPAN> ... </SPAN>. В принципе, это не накладывает на разработчика никаких серьезных ограничений. Мы, по прежнему, можем позиционировать любой элемент - например таблицу, достаточно закючить этот элемент в тэги DIV или SPAN.
С интересующей нас точки зрения тэги DIV и SPAN различаются только тем, что появление тэга DIV вызывает перевод строки в документе, а появление тэга SPAN - нет. В остальном, будем считать их одинаковыми и работать с ними одинаково.
Впредь, мы везде будем говорить об элементах, но следует помнить, что мы имеем в виду только элементы позиционированния, т.е. сам документ, разделы документа и части документа, выделенные тэгом <SPAN> ... </SPAN>.
Элементы в HTML документе образуют иерархическую структуру. Во главе иерархии стоит сам документ - тэг <BODY>. Далее, документ может быть разделен на элементы. Те, в свою очередь, могут также быть разделены на элементы и т.д. Важным для нас является тот факт, что, во многом, мы можем рассматривать элементы документа, как самостоятельные документы. Например, мы можем писать в элемент с помощью document.write и т.д.
Иерархическая структура предполагает между элементами отношения типа родитель-потомок и братья. Элемент, который непосредственно включает в себя другие элементы, называется их родителем (parent), а включаемые элементы - его потомками (child). Элементы, имеющие общего родителя, называются братьями (siblings).
Например, рассмотрим документ:
<body>
<div id="D1">
<div id="D11">
</div>
<div id="D12">
</div>
</div>
<div id="D2">
</div>
</body>
|
здесь элемент документ имеет двух потомков - элементы D1 и D1. Соответственно, он является их родителем, о они сами, между собою - братьями. Элемент D1, в свою очередь, является родителем элементов D11 и D12. Сами D11 и D12 являются братьями. |
Свойства cssp
Свойства CSSP, на самом деле, являются параметрами стилевого оформления и записываются там же, где и все остальные параметры стилей. Их можно помещать прямо в тэг, с помощью параметра STYLE, выносить в начало документа или в отдельный файл. В общем, верно все, что было ранее сказано о стилях.
Рассмотрим основные свойства CSSP. Здесь приведены только те свойства, которые поддерживаются обоими браузерами. Есть еще ряд чрезвычайно полезных свойств, например clip или overflow, но, к сожалению, их поведение очень сильно зависит от браузера.
|
Свойство |
Описание |
Возможные значения |
Применимость |
|
position |
Делает элемент позиционируемым |
absolute | relative |
все элементы |
|
left |
горизонтальная координата верхнего левого угла элемента |
length | percentage |
Абсолютно и относительно позиционированные элементы |
|
top |
вертикальная координата верхнего левого угла элемента |
length | percentage |
Абсолютно и относительно позиционированные элементы |
|
height |
высота элемента |
length |
DIV, SPAN |
|
width |
ширина элемента |
length | percentage |
DIV, SPAN |
|
visibility |
управляет видимостью элемента |
MSIE: visible | hidden NN: show | hide |
все элементы |
|
z-index |
номер слоя в котором расположен элемент |
integer |
Абсолютно и относительно позиционированные элементы |
В таблице курсивом написаны названия значений, вместо которых, следует подставлять реальные значения, например, вместо length, следует подставлять длину.
Значения которые "так и пишутся", написаны прямым шрифтом. Например, для задания абсолютного позиционирования, следует писать "position: absolute".
Подчеркнуты значения, которые принимаются по умолчанию, если не указано ничего.
Наконец, звездочками помечены значения, которые отсутствуют в Netscape Navigator. К счастью, все они являются "значениями по умолчанию", поэтому, если их, попросту, опускать и никогда на использовать, все будет хорошо в обоих браузерах.
Таким образом, все, кроме visibility можно спокойно использовать в обоих браузерах. Что касается свойства visibility, мы поговорим о нем чуть позже.
Перейдем к рассмотрению свойств CSSP по отдельности.
position: absolute
Абсолютно позиционированный элемент всегда расположен так, что его левый верхний угол отстоит на расстоянии left и top от точки отсчета. Если, при изменении размеров окна, или по другой причине, точка отсчета переместится, переместится и абсолютно позиционированный элемент.
Точка отсчета определяется таким образом: берется элемент - родитель данного. Если он позиционирован абсолютно (absolute) или относительно (relative), или, если этот элемент -BODY, то, в качестве точки отсчета принимается его верхний левый угол. В противном случае, снова берется его родитель и весь процесс повторяется.
Таким образом, чтобы определить точку отсчета, мы идем вверх по дереву иерархии (каждый раз от элемента к его родителю) до тех пор, пока не встретим абсолютно или относительно позиционированный элемент или, не дойдем до элемента BODY. В этот момент мы останавливаемся и считаем точкой отсчета левый верхний угол найденного элемента.
Очень важным свойством абсолютно позиционированных документов, является то, что они не учавствуют в нормальном процессе форматирования документа. Для них не выделяется места в документе. Вместо этого, они располагаются там, где им указано. Возможно, при этом они накрывают собою другие части документа.
position: relative
Относительное позиционирование отличается от абсолютного во всем, кроме одного - здесь тоже элемент всегда привязан к своей точке отсчета и перемещается всегда, когда перемещается она.
Относительно позиционированные элементы участвуют в форматировании документа. Им всегда выделяется место в документе. По умолчанию, они располагаются всегда в том порядке, как записаны.
Скажем точнее. Если бы мы всегда опускали параметры left и top у всех относительно позиционированных элементов, то они бы расположились точно в том порядке, в каком они располагались бы и без всякого позиционирования.
Точкой отсчета для любого относительно позиционированного элемента является та точка, в которой находился бы его левый верхний угол, если бы в документе вовсе не использовалось бы позиционирование!