Объект Style позволяет изменить стиль любого элемента Web-страницы., просто присвоив нужному свойству необходимое значение.
Paragraph1.style.color=”red”
Paragraph1.style.fontSize=7;
В этих строках у элемента paragraph1 с помощью объекта style установлен красный цвет и седьмой размер шрифта.
Рассмотрим простейший пример. Пример_33 В этом примере динамически меняется цвет текста и его размер. Заметим, что в качестве элемента страницы выступает параграф par, который и содержит пульсирующий текст:
<center><p id="par"> Пульсирующий текст </p></center>
Цвет берётся из ранее созданного массива col:
var col=newArray("lightsalmon","mistyrose","lightcoral","hotpink","fuchsia","firebrick","deeppink","darkred","crimson","coral","blueviolet","crimson","darkmagenta","darkviolet","hotpink","mediumorchid","mediumvioletred","orangered","red","violet")
Смена цвета и размера выполняется в функции f():
function f()
{ par.style.fontSize=size;
par.style.color=col[i]
i++
if (i==21) i=0
if (size<30&&fl==0 ) {size++}
if (size==30) {fl=1}
if (fl==1) {size--}
if (fl==1&&size==10) {fl=0}
setTimeout("f()",50) }
Как видно, в первых двух строках, с помощью объекта style, свойству fontSize (размер шрифта) элемента par присвоено значение переменной size, которая была инициализирована ранее некоторой величиной, например 10. В следующей строке, также используя объект style, свойству color того же элемента присвоено значение элемента массива, который содержит наименования цветов. Таким образом, стиль элемента par изменился, а именно изменились размер шрифта и его цвет. Затем меняем значение переменной i, которая отвечает за номер цвета, и меняем значение переменной size - она содержит размер шрифта, после чего снова вызываем функцию f(). Происходит переприсваивание нового значение цвета и размера шрифта, в результате чего внешний вид элемента снова меняется.
Эффект пульсации достигается за счёт того, что размер шрифта достигнув определённой величины (30), начинает уменьшаться до начального размера (10). Переменная i достигнув значения 20 снова сбрасывается в 0 – это сделано для того, чтобы не выходить за пределы размерности массива.
Таким образом, установили, что свойство color и fontSize можно использовать для динамического изменения цвета и размера текста.
Нетрудно догадаться, что объект style позволяет менять и геометрические размеры элементов:
Image1.style.width=”100mm”;
Image1.style.height=”100mm”;
В этих строках ширина и высота элемента image1 установлена в 100 мм. Рассмотрим простой пример, который заполняет документ выезжающими навстречу друг другу полосками красного и синего цвета: Пример_34 (34\1.html)
Изначально на странице расположены два изображения р1 и р2:
<img src="1.bmp" width="10" height=35% id="p1">
<img src="2.bmp" width="10" height=35% align="right" id="p2">
Один элемент расположен слева, второй справа, оба занимают треть экрана и имеют ширину 10.
Затем устанавливается таймер, который вызывает функцию f() каждую миллисекунду:
var tim=setInterval("f()",1);
Переменной к присваивается значение 10 –начальная ширина обоих элементов p1 и р2.
Рассмотрим функцию f():
function f()
{ p1.style.width=k;
p2.style.width=k;
k=k+10;
if (k> document.body.clientWidth) {clearTimeout(tim)};}
Первые две строки устанавливают ширину элементов р1 и р2 равными значению из переменной к – в начале 10. Затем увеличиваем значение к на 10 и проверяем не вышло ли оно за пределы экрана. Если оно не вышло то функция f() будет вызвана установленным ранее таймером и произойдёт изменения ширины элементов- изображений. Это и создаёт эффект «выдвигания полос синего и красного цвета». Если же значение k достигло границы экрана (полоска достигла противоположного края), уничтожаем таймер и прекращаем вызов функции f(). Обратим внимание, что для анализа достижения границы документа применили новое свойство документа – document.body.clientWidth. Как можно догадаться, это свойство вернёт реальную ширину окна документа. Запомним это свойство – в дальнейшем оно может пригодиться.
Удобно с помощью объекта style изменять и местоположение элемента:
Image1.style.top= “200px”
Image1.style.left= “ 50px”
Эти строки перемещают элемент image1 в положение 200 пикселей сверху (свойство top) и 50 пикселей слева (свойство left).
Чтобы окончательно разобраться с принципом работы объекта style рассмотрим пример:Пример_35
В этом примере содержится элемент, которым можно управлять уже знакомым способом – щёлкая по гиперссылкам. Элементом является текст и можно изменять некоторые его свойства: жирность и курсивное начертание, подчёркивание.
Прежде чем располагать элемент на странице зададим его стилевое оформление:
<style>
primer {font-weight:normal; font_style:normal text-decoration:none}
Как известно, стилевое оформление задаётся внутри тега <style>. Затем указывается имя объекта (в данном случае primer) и в фигурных скобках задаётся стиль основанных свойств. Так в нашем случае свойству font-weight, которое задаёт «жирность» присвоено значение normal. Это указывает что элемент primer будет напечатан обычным (не жирным) шрифтом. Для установления «жирности» необходимо присвоить значение bold. Следующее свойсвто – это font_style. Оно задаёт вид шрифта элемента. В данном случае оно установлено в normal. Для наклонного начертания необходимо этому свойству присвоить значение italic. Последнее свойство – text-decoration. Оно отвечает за специальное оформление текста – подчёркнутый, зачёркнутый и т.д. В начале оно установлено в значение none. Для подчёркивания текста необходимо этому свойству присвоить значение underline.
Также здесь опишем стиль для объекта link, который обозначается тегом а. Заметим, что данное стилевое оформление будет применено ко всем гиперссылкам, т.к. мы указали не имя элемента, а его тип.
a {text-decoration: none}
</style>
Для всех гиперссылок свойство text-decoration установлено в none.
Теперь расположим элемент primer:
<p id="primer"> Здесь вы можете видеть результаты щелчков </p>
и три гиперссылки.
<p><a id="t1" HREF="javascript:f1()"> Полужирный </a></p>
<p><a id="t2" href="javascript:f2()"> Курсив </a></p>
<p><a id="t3" href="javascript:f3()"> Подчёркнутый </a></p>
В примере, после щелчка по гиперссылке происходит её зачеркивание, указывая тем самым, что соответствующее свойство текста уже установлено. При повторном щелчке это подчёркивание с гиперссылки снимается.
Каждая гиперссылка имеет имя – t1,t2,t3, по этим именам будем в дальнейшем обращаться для изменения их стиля начертания. Каждой гиперссылке соответствует функция – f1(),f2(),f3(). Рассмотрим первую функцию:
function f1()
{ jir=!jir;
if (jir)
{primer.style.fontWeight='bold'; t1.style.textDecoration='line-through';}
else
{primer.style.fontWeight='normal';t1.style.textDecoration='none'; }}
Переменная jir указывает, должен ли быть выделен элемент «жирным»: если jir=false – элемент не должен быть выделен «жирным», если jir=true – должен.
Переменной jir ранее было присвоено значение false – эти самым мы указали, что изначально текст не выделен. В первой строке функции, мы меняем значение jir на противоположное – т.е. если текст перед вызовом функции был «жирным», то делаем его обыкновенным и наоборот, если был обыкновенным, то должен стать «жирным». Затем проверяем, если jir=true, то производим следующее форматирование: у элемента primer свойство fontWeight устанавливаем в значение ‘bold’ – текст элемента primer станет «жирным». Свойство textDecoration элемента t1 (первая гиперссылка) устанавливаем в значение 'line-through' – т.е. начертание гиперссылки будет перечёркнутым. Заметим, что названия свойств объекта style отличаются от названий в теге <style> только отсутсвием знака дефиса.
Если же jir=false, то свойство fontWeight элемента primer устанавливаем в normal (тем самым убираем 1жирность»), а свойство textDecoration устанавливаем в none, что уберет перечёркивание с гиперссылки.
Функция f2() построена аналогичным способом:
function f2()
{kur=!kur;
if(kur)
{primer.style.fontStyle='italic';t2.style.textDecoration='line-through';}
else
{primer.style.fontStyle='normal';t2.style.textDecoration='none'; }}
Переменная kur указывает на то, должен ли текст быть отображён курсивом или нет. Так как в начале текст элемента primer не должен быть курсивным, то kur=false. Отличие функции f2() в том, что для отображения курсивом, используется свойство fontStyle и перечёркивание применяется к элементу t2 (вторая гиперссылка).
Осталось рассмотреть функцию f3():
function f3()
{pod=!pod;
if(pod)
{primer.style.textDecoration='underline';t3.style.textDecoration='line-through';}
else
{primer.style.textDecoration='none';t3.style.textDecoration='none'; }}
Как видно из этой функции, для подчёркивания и перечёркивания текста применяется одно свойство: textDecoration, но с разным значением – для подчёркивания textDecoration должен быть равен underline, для перечёркивания - line-through.
Итак, мы познакомились со способом стилевого форматирования теста.
Как было сказано выше, объект style позволяет организовать перемещения элемента на странице (элемент должен имеет свойство top и left), например image. В связи с этим рассмотрим пример. Пример 36 (EX36\animation.html)
Начнём рассмотрение с формирование надписи «ВГПУ». Надпись оформлена с помощью тега свободного пизицирования <div>. Но перед применением этого тега, для него было задано стилевое форматирование:
<style>
div {font-size:72; font-weight:bold}
#div1 {top:50; left:50; position:absolute; z-index:1}
#div2 {top:50; left:100; position:absolute; z-index:-1}
#div3 {top:50; left:150; position:absolute; z-index:1}
#div4 {top:50; left:200; position:absolute; z-index:-1}
</style>
В первой строке указано, что для всех элементов тега <div> установлен 72 размер шрифта и жирное начертание. В следующих четырёх строках описано стилевое форматирование для элементов div1,div2,div3,div4. Обратим внимание, что это не теги, а просто названия элементов. Так для элемента с именем div1 задано расположение относительно верхнего края 50 пикселей и левого края 50 пикселей. Свойство position указывает, относительно чего отсчитываются координаты элемента. В данном случае значение absolute задаёт абсолютное позицирование, т.е. координаты отсчитываются относительно левого верхнего угла родительского элемента (в этом примере относительно границы документа). Ещё одно интересеное свойство – z-index, которое задаёт порядок перекрытия свободно позицированных объектов. Порядок задаётся отрицательным или положительным числом. При этом элементы с большим значением этого атрибута будут перекрывать элементы с меньшим значением z-index. Слой по умолчанию это 0. Следовательно, элементы с z-index= -1 будут расположены «под» этим слоем, а элементы с z-index=1 на этом слое. Забегая вперёд, скажем, что рисунок имеет z-index=0, следовательно, он будет располагаться над элементами с индексом -1 и под элементами с индексом 1.
Таким образом, было установлено стилевое форматирование для всех четырёх элементов. Заметим, что свойство left у них установлено так, что элементы расположены рядом друг с другом с некоторым промежутком.
Теперь расположим элемент изображение. Использовать будем также тег <div>. Заметим, что стилевое форматирование установленное ранее для всех объектов div на элемент image не действует, т.к. он не имеет ни размера шрифта, ни начертания. Элемент имеет имя liveddiv и установлен сразу слева на расстояние сверху 70 пикселей. Его ширина 30 пикселей (свойство width). Остальные свойства нам уже знакомы.
<div id="liveddiv" style=" top:70;left:0;width=30; position:absolute">
<img src="tip.gif"> </div>
Осталось вывести надпись ВГПУ:
<div id="div1">В</div>
<div id="div2">Г</div>
<div id="div3">П</div>
<div id="div4">У</div>
Как видно здесь мы не указывали ни размер шрифта, ни расположение букв, ни начертание. Все это определно в стилевом форматировании для общего тега <div> и для каждого элемента div1,div2,div3,div4 отдельно.
Теперь перейдём к скрипту, который осуществляет движение элемента liveddiv:
<script>
var dx,timer;
dx=4;
function moveImage()
{liveddiv.style.pixelLeft+=dx;
if (liveddiv.style.pixelLeft+liveddiv.style.pixelWidth+55>=document.body.clientWidth) dx=-dx;
if (liveddiv.style.pixelLeft<=0) dx=-dx;}
function setupAnimation()
{timer=window.setInterval ("moveImage()",100)}
</script>
Описанные переменные dx и timer отвечают за шаг перемещения и указатель на таймер соответственно. Передвижение элемента moveImage() осуществляется функцией moveImage(). В первой строке этой функции значение свойства pixelLeft объекта style увеличивается на величину dx. Заметим, что свойство pixelLeft - это свойство самого объекта style, которое указывает смещение левого края элемента. Казалось бы, для этих целей подходит и свойство Left, присущее просто стилю элемента, но при его использовании необходимо указывать строковые значения геометрических параметров с указанием единицы измерения, что при динамическом изменении положения практически невозможно. Поэтому для подобных целей необходимо использовать свойства pixel*** (pixelLeft, PixelTop). Именно увеличение свойства pixelLeft и осуществляет перемещение элемента liveddiv.
В следующей строке проверяется, не достигло ли изображение liveddiv края документа. Проверка осуществляется с учётом ширины элемента, т.к. правый край элемента раньше достигает границы документа. Поэтому используется свойство pixelWidth, которое возвращает значение ширины объекта в пикселах. Очевидно, если правая граница элемента достигла правого края документа, направление движение необхъодимо менять на противоположное:
Dx=-dx.
Как только свойство pixelLeft стало равным 0 или меньше 0 (т.е. элемент liveddiv достиг левой границы документа) снова меняем направление движения.
Теперь осталось осущесвить вызов функции movImage средством установки таймера:
timer=window.setInterval ("moveImage()",100)