КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Что такое HTTP 22 страница
|
|
|
|
</script>
</head>
<body>
<form>
<input type="button" value="HaiMM меня" onclick=
"changeVis()" />
</form>
<!-- Начинается первый слой -->
<div id="mydivl">
<img src="1980main.jpg" />
<р>Этот прекрасный загородный дом
расположен а саном сердце старого города.
Это придает ему особую прелесть, потому что.
имея во дворе чудесный вишневый сад,
</р>
<!-- Кончился первый слой -->
<!-- Начинается второй слой -->
<div id="mydiv2">
<img src="1730maple. jpg" />
<р>Рядом с этим доном расположены не только
хорошие школы и парк с раскидистыми кленами,
но и прекрасные утоптанные дорожки.
<!-- Кончился второй слой -->
</body>
</html>
Здесь мы снова создали два элемента <div> и в качестве начальной установки определили, что первый из них будет спрятан. По нажатию кнопки пользователь может спрятать то, что раньше было видно, а вместо этого увидеть то, что раньше было спрятано. Это делается у нас с помощью специальной функции, меняющей параметр visibility у слоев. Таким образом получается, что содержимое страницы — сменное. Мы как будто меняем кадры диафильма. В браузере это будет выглядеть так, как показано на рис. 19.11, но я тем не менее советую попробовать записать листинг в какой-нибудь файл и протестировать страницу на своем компьютере.
Рис. 19.11. Исходная страница (сверху) и та же страница после нажатия кнопки (снизу)
Чтобы такая страница не была безвозвратно утеряна для Netscape, где, как вы помните, реализация DOM несколько отличается от IE, следует внести следующие изменения в функцию:
function changeVisO {
mydivl - document.getElementByld ("mydivl").style:
mydiv2 - document.getElementByld ("mydiv2").style:
if (mydivl.style.visibility!= "hidden") { mydivl.style.
visibility = "hidden";
mydlv2.style.visibility = "visible":
else {
mydivl.style.visibility = "visible": mydiv2.style.
visibility = "hidden":
}
ПРИМЕЧАНИЕ
Еще раз напоминаю о том, что пример, показывающий межбраузерную совместимость DHTML, еще впереди.
Слои Netscape
В Netscape 4.x используется несколько иной подход к слоям. Там имеется элемент <1ауег>. Он никогда, впрочем, не имел особой популярности и так и не был принят в состав стандартных элементов HTML/XHTML. Ко времени выхода в свет 6-го поколения браузеров создатели Netscape смирились с такой участью <lауег> и стали больше смотреть в сторону позиционирования и создания слоев на основе CSSP, оставив этот элемент лишь для совместимости.
Между <lауег> и CSSP есть ряд принципиальных разногласий. Будем говорить сейчас об элементе <l ауег>.
- При его использовании совершенно не требуется заранее определять стиль. Тем не менее у стиля есть id, однако устанавливается он не так, как в CSSP.
- Он работает так же, как любые другие элементы веб-страницы, то есть такие параметры, как id, top, left являются обычными атрибутами. Это касается и синтаксиса. Используется знак равенства, за которым следует значение в кавычках. Никаких двоеточий и точек с запятой, как в определениях стилей, не нужно.
- Имеется атрибут src, с помощью которого можно в качестве слоя использовать целую веб-страницу. При этом есть параметры раgех и раgеу, не имеющие аналогов в CSSP.
Вам уже знаком подход CSSP к позиционированию элементов, поэтому, мне кажется, <lауег> не должен казаться жутко незнакомым. Пример приведен в листинге 19.10.
Листинг 19.10. Слои Netscape и позиционирование
<html xmlns="http: //www. w3.org/1999/xhtml ">
<head>
<title>Подход Netscape к созданию слоев</title>
</head>
<body>
<layer id="mydivl" top="50" left="50">
<img src=" 1980main.jpg" />
<р>Этот прекрасный загородный дом
расположен в самом сердце старого города.
Это придает ему особую прелесть. </р>
</lауег>
<lауег id="mydiv2" top="500" left="50">
<img src="1730maple.jpg" />
<р>Рядом с этим домом расположены не только
хорошие школы и парк с раскидистыми кленами,
но и прекрасные утоптанные дорожки. </р>
</lауег>
</body>
</html>
Как и <div>, контейнер <lауег> включает в себя весь текст и разметку, которая должна войти в слой. В отличие от <div>, изменения стилей организуются с помощью атрибутов <lауег>, без каких-либо специальных определений таблиц стилей. Позиционирование — абсолютное по натуре своей: указываемые координаты отсчитываются относительно окна браузера.
Вы уже успели заметить некоторые атрибуты элемента <lауег>. Ниже приведен полный список с описаниями.
- Id. С помощью этого атрибута задается уникальный идентификатор.
- left и top. Координаты левой верхней точки слоя относительно «родительского» объекта.
- Позиционирование с помощью этих атрибутов осуществляется так же, как и в CSSP. Единицы измерения по умолчанию — пикселы, поэтому спе циально указывать рх не требуется.
- радех и радеу. Эти атрибуты позволяют задать расположение слоя, основываясь на размерах целой страницы, даже если родительский объект представляет собой нечто иное. (Имеется в виду, если <lауег> вложен в другой элемент.)
- src. Внешний файл, используемый в качестве содержания слоя.
- width и height. Размеры слоя. Единицы измерения по умолчанию — пикселы,но это могут быть и проценты (height="50%").
- clip. С помощью cliр можно указать часть слоя, которая будет видна. Значения отступов, как обычно, следуют в таком порядке: левый, верхний, правый, нижний. Например: с11р="5.5,100.100".
- z-Index. Уже знакомый атрибут. Позволяет задать порядок следования слоев. Чем больше значение, тем выше будет находиться слой.
- visibility. Опять же, как и в CSSP, свойство visibility определяет видимость слоя и может иметь три значения: show, hidden и inherit. Последнее означает наследование свойства видимости у родительского объекта.
- bgcolor и background. Да-да, можно задать цвет фона для слоя. Да и не только цвет (в шестнадцатеричном формате или с помощью названия), но и URL фонового изображения!
В дополнение ко всему этому следует упомянуть контейнер <nolауег>, содержимое которого будет выведено на экран в том случае, если браузер не имеет поддержки элемента <lауег>. Пример:
<nolауег>Эта страница лоступна для просмотра
только в браузерах Netscape 4.0 или выше. </nolayer>
Внутристрочные слои Netscape
Это ответ Netscape относительному позиционированию элементов CSSP. Технически он реализуется с помощью элемента <Ilауег>, который задает так называемый внутренний, внутристрочный слой. На самом же деле, как и при относительном позиционировании в CSSP, <ilауег> начинается там, где его содержимое могло бы быть, не будь этого элемента. И относительно этого места экрана ведется отчет параметров top и left. Примером может служить следующий отрывок кода:
<body>
<р>0бычный абзац XHTML.</р>
<ilayer id="para2" left="10">
<p>А это - необычный абзац. Он сдвинут относительно
своего нормального местоположения на 10
пикселов вправо.</р> </ilayer>
<р>А это снова обычный абзац, он находится на своем
"законном" месте.</р>
</body>
Программная обработка слоев Netscape
Для манипулирования слоями Netscape можно использовать любой язык написания скриптов, например JavaScript. Объектная модель, правда, слегка отличается от используемой в CSSP (впрочем, она отличается и в зависимости от браузера), поэтому запутаться очень легко. К счастью, хотя бы доступ к свойствам слоев Netscape не является проблемой. Структура его такова:
Имя_слоя.Имя_свойства
В Netscape имеется множество методов работы с <lауег>, доступ к ним осуществляется следующим образом:
Имя_слоя.Имя_метода()
В отличие от многих объектов и элементов Netscape 4, слои могут динамически изменяться. Можно их применять и в Netscape 6, хотя свойства CSSP также не запрещают этого и при этом ближе к «межплатформенности».
Свойства объекта layer практически повторяют атрибуты соответствующего эле мента. Единственная существенная разница заключается в применении clip, па раметры которого адресуются по отдельности: layerl.clip! eft, layerl.cliptop, erl.clipright и layerl.clipbottom.
Сами слои содержатся в специальном массиве, входящем в состав объекта document. Для того чтобы получить доступ к какому-то конкретному слою, можно использовать его имя в качестве индекса этого массива.
document. layers [" layerl" ]
Oчень часто бывает удобно завести новую объектную переменную, чтобы рабо-[татьнепосредственно с ней. Это делается при помощи обычного присваивания:
МyLayer = document. layers["layerl" ]:
Теперь можно спокойно обращаться к свойствам и методам данного слоя: MyLayer.top = 5:
У самого объекта layer есть ряд методов, которые не имеют аналогов в CSSP. Они применяются для непосредственного манипулирования слоями, их перемещения и установки видимости. В таблице 19.2 показаны эти методы.
Таблица 19.2. Методы объекта layer
| Метод | Описание |
| moveBy(x, у) | Сдвигает слой на указанное число пикселов |
| moveTo(x, у) | Сдвиг на указанные координаты (относительно родительского объекта) |
| moveToAbsolute(x, у) | Сдвиг на указанные абсолютные координаты |
| геsizeВу (ширина, высота) | Увеличивает/уменьшает слой на указанное число пикселов |
| геsizeТо (ширина, высота) | Увеличивает/уменьшает слой до указанного числа пикселов |
| movеАbоvе (имя_слоя) | Помещает данный слой над указанным в скобках |
| movеВеlоw (имя_слоя) | Помещает данный слой под указанным в скобках |
| load(src, ширина) | Заменяет текущее содержимое на содержимое указанного файла |
Имейте в виду, что в Netscape 4 изменение размеров слоя может привести к несколько неожиданным результатам. Оно там работает, больше напоминая clip, то есть просто делает невидимой часть слоя за пределами границ. Методы следует использовать совершенно обычным способом (привычным для JavaScript):
layerl.resizeTo(250. 500):
Ну, теперь вы уже готовы к непосредственному применению JavaScript. В следующем примере будет использован тот же подход к перемещению слоев, что и в лис тинге 19.9, где было задано два объекта, и по нажатию кнопки они меняли свое свойство видимости. В листинге 19.1 1 примерно то же самое делается с применением элементов <lауег>.
Листинг 19.11. Изменение видимости слоев
<!DOCTYPE html PUBLIC "\//W3C//DTD XHTML
1.0 Transitional //EN"
"http://www.w3.org/TR/xhtmll/DTD/
xhtittll-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml">
<head>
<titlе>Слоеный веб-пирог и Netscape</title>
<script>
<!--
function changeLayer() {
window.alert (document. mydivl.visibility):
if (document. mydivl. visibility!= "hide")
{
document. mydivl. visibility = "hide":
document. mydiv2. visibility = "show":
}
else {
document. mydivl. visibility!= "show";
document. mydiv2. visibility = "hide";
--> </script>
</head>
<body>
<form>
<input type="button" уаluе="Нажми меня"
onclick="changeLayer()" l>
</form>
<layer id="mydivl" top-"50" left="50">
<img src="1980main.jpg" />
<р>Этот прекрасный загородный дом
расположен в самом сердце старого города.
Это придает ему особую прелесть, потому что.
имея во дворе чудесный вишневый сад. вы в то
же время будете обеспечены всеми благами
цивилизации. Поблизости расположена старая
добрая аптека, а также лечебный фонтан!
Сделайте свою жизнь такой, как вам нравится,
всего лишь за $125 000.</р>
</lауег>
<lауег id="mydiv2" top="50" left="50"
visibility="hide">
<img src="1730maple.jpg" />
<р>Рядом с этим домом расположены не
только хорошие школы и парк с раскидистыми
кленами, но и прекрасные утоптанные дорожки.
</р>
</lауег>
</body>
</html>
Очевидно, что этот скрипт очень похож на аналогичный пример, сделанный с расчетом на CSSP. Здесь лишь использован элемент <lауег>, присущий известно какому браузеру, а также его же объектная модель. Но на самом деле, как вы увидите дальше, все это можно совместить и в одной странице.
Пример страницы с DHTML, не зависящей от браузера
Вот мы и подобрались к вопросу, который уже давно волнует общественность в лице моего читателя: «Да в конце-то концов, могу я сделать хоть что-нибудь, не зависящее от браузера? Хоть одну страницу, которая бы нормально работала и в IE, и в Netscape 4, и в Netscape 6?» Ответ будет утвердительный. Сейчас мы попробуем выявить общие свойства всех браузеров и собрать в одном примере то, что мы делали в листингах 19.9 и 19.11.
Для начала разберемся с Netscape 4. Я вас не очень удивлю, если скажу, что при нежелании использовать элемент <lауег> можно спокойно без него обойтись? А это действительно так. Вы забыли, что Netscape 4 очень хорошо понимает, что значит элемент <di v>? Забыли, что идентификаторы можно задать и в секции <style>? Вот каким будет пример DHTML, который распознают все три браузера:
<style type="text/css">
#mydivl {
position: absolute; left: 50px; top: 50px: width: 500px:
height: 400px: visibility: visible; }
#mydiv2 {
position: absolute: top: 50px: left: 50px; height: 400px;
width: 500px: visibility: hidden; }
</style>
Нет сомнений, что любой браузер воспринимает контейнер <body>. Тогда почему же возникают сомнения, будто кто-то из них не будет поддерживать <div> н обработку события onelick.
Хм... В чем же тогда отличие между браузерами? Собственно говоря, только в функ ции, которая меняет слои. Она отличается по следующим причинам:
- Каждый браузер обращается к объектам document по-своему. 1Е4 (н выше) поддерживает синтаксис document.all.имя_слоя; в Netscape 6 используется такой: document.getElementByld("имя_слоя"), а в Netscape 4 вы встретите еще один вариант: document. имя_слоя.
- Netscape 4 может, конечно, присвоить свойству visibility значения visible или hidden, однако проверять-то он будет его на значения show или hide. Об этом не следует забывать.
ПРИМЕЧАНИЕ
С технической точки зрения IE 5.5 и выше должен поддерживать подход Netscape 6, однако это привело бы к размножению проверяемых типов браузеров. Вместо трех их стало бы четыре. В общем, поскольку IE 5.5 совместим с IE 4, мы считаем, что IE любой версии — Это одна и та же сущность.
Единственный способ постановки версии функции в зависимость от используемого браузера — это проверка его типа и версии. После этого, немного поработав с объектами, мы добьемся своей цели. Вот как будет выглядеть тестирующая часта функции:
var isNet4:
var isNet6:
var isIE;
if (navigator.appName == "Netscape") {
if (navigator.appVersion.charAt(O) == 4) isNet4 = true:
if (navigator.appVersion.charAt(O) == 6) isNet6 = true:
}
if (navigator.appName.indexOfC'Microsoft")!= -1)
isIE = true:
Рассмотрим, что здесь происходит. Происходит серия маленьких проверок, с помощью которых выявляется, с каким браузером мы имеем дело.
1. Для начала создаются три переменные, которые соответствуют трем типам тестируемых браузеров.
2. Проверяется имя приложения.
3. Если именем является «Netscape», то нужно проверить его версию. В зависимости от этого устанавливается значение true либо переменной 1sNet4, либо isNet6.
4. Если же в имя приложения входит слово «Microsoft», то сразу становится все понятно. Дальше можно ничего не проверять, а установить в true переменную isIE. (Технически это сравнение производится с помощью метода IndexOf. Проверяется, является ли строка "Microsoft" частью имени браузера. Если этот метод возвращает значение, отличное от 1, значит, это так. Способ несколько запутанный, но зато работает.)
5. Теперь мы можем заняться написанием функции, которая, в зависимости от результатов произведенной проверки, выберет, что делать дальше. Здесь мы должны включить в состав переменных visTest, которая будет содержать строку, соответствующую свойству visibility. (Проблема, напомню, в том, что при тестировании видимости для Netscape 4 возможными значениями являются hi de и show, а не hidden и visible. Вместе с тем эти значения просто не будут распознаваться при обработке, а присвоить-то их никто не запрещает. Поэтому никакие уступки Netscape 4 в секции, непосредственно меняющей местами слои, не нужны.)
6. Затем создаются две объектные переменные (divlObject и div20bject), которые призваны исключить разницу в восприятии браузерами свойства visibiIity:
van visTest; var divlObject: van div20bject:
if (isNet4) { visTest = "hide": divlObject = document.mydivl:
div20bject = document.mydiv2; }
if (isNet6) { visTest = "hidden":
divlObject = document.getElementByldt"mydivl").style: div20bject
= document.getElementById("mydiv2").style: }
if (isIE) {
visTest = "hidden":
divlObject = document.all.mydivl.style:
div20bject = document.all.mydiv2.style:
}
Функция закапчивается тем же самым программным «пассажем», который вы видели и в листинге 19.9, и в 19.11. Свойство visibility тестируется, выясняется, не является ли первый слой скрытым. Если не является, то он скрывается, а показывается второй слой. Если же первый слой скрыт, происходит обратное.
if (divlObject.visibility!= visTest) { divlObject.visibility =
"hidden":
</body>
</html>
Межбраузерный программный интерфейс (API)
В предыдущем параграфе вы наблюдали, как довольно большая программа в o6 щем-то выполняет не такую уж большую работу. Можете себе представить, что будет, если вы попытаетесь написать серьезное веб-приложение с множестве функций? Хотя вполне приемлемо писать подобные вспомогательные функции распознавания браузеров и обобщения своих скриптов путем создания специальных указателей на конкретные элементы DOM, все-таки более грамотным и целе сообразным решением было бы использование специального программного интерфейса приложений (АРГ).
Хотя традиционно считается, что API — это привилегия полноценных языков программирования, тем не менее был разработан соответствующий межбраузерный стандарт и для JavaScript. Эти интерфейсы представляют собой предопределенные наборы вызовов функций, что очень сильно упрощает решение таких стандартных задач, как определение версий браузеров. Вместо того чтобы изобретать велосипед, занн маясь написанием давно известных функций, вместо того чтобы еще и отлаживать их, — гораздо проще вызвать стандартную подпрограмму, которая все сделает как нужно. В таких вещах редко требуется гибкость, потому что проблемы эти общеизвестны; программировать их решение самостоятельно просто нет никакого смысла, API можно загрузить в виде внешнего файла скриптов, а вызывать их из своего файла.
Звучит заманчиво, не правда ли? Чтобы узнать больше, посетите один из следующих сайтов:
- http://www.mozilLa.org/docs/Be6-developer/csspapi/csspapi.html. Компания Mozilla-разработчик ядра браузера Netscape — предлагает совершенно бесплатно скачать межбраузерный API для JavaScript.
- http://dynapi.sourceforge.net/dynapi/. DynAPI — это примерно то же самое, что в API для совмещения различных браузеров, однако включает в себя еще и некоторые дополнительные функции для упрощения работы с DHTML.
Динамические стили и классы
Теперь, когда вы знаете, как с помощью скриптов изменять позиционирование элементов (CSSP), вы запросто освоите динамическое программирование CSS.
И это действительно несложно! Впрочем, лишь до тех пор, пока вы не возьметесь подгонять свои скрипты под Netscape 4. Как вы ни будете стараться, ничего у вас не получится, потому что этот браузер, в принципе, не умеет динамически изменять страницы. Меж тем IE 4 это умеет, не говоря уж о более свежих версиях. Так получилось, что только к 6-й версии Netscape обрел эту замечательную возможность. Зато можно с уверенностью сказать, что начиная с этого уровня оба браузера заметно сблизились.
Между прочим, мы сейчас с вами говорим о программировании CSSL, потому что возможности CSSP считаются принадлежностью CSS2. Что до CSS1, так это уже давно устоявшийся стандарт, о котором шла речь в главе 10. Вы, должно быть, по- мните font, text, border и прочие свойства. В этом разделе мы рассмотрим программирование CSSL для IE 5.5 и выше, Netscape 6 и совместимых с ними браузеров.
Программирование стилей и свойств
Учитывая все имеющиеся у вас знания, не хочется даже особо комментировать такие очевидные вещи, как те, что вы сейчас увидите. Например:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>динамические изображения</title>
</head>
<script type="text/javascript">
function changeText (p) {
p.style.color="red":
</script>
<body>
<p onmouseover="changeText(this)">
TecT l1</p> <p onmouseover="changeText(this)">
TecT 2</p>
</body>
</html>
Если поместить указатель мыши на один из тестовых абзацев, цвет текста изменится на красный. Стиль меняется с помощью простого присваивания в обработчике событий: p.style.color="red".
Можно поэкспериментировать практически с любым стилем из набора CSS1 и менять примерно таким способом свойства. Поскольку большинство значений атрибутов являются строковыми, можно принимать их и от пользователя, а затем заниматься присваиванием, как в листинге 19.13.
Листинг 19.13. Изменение цвета текста
<!DOCTYPE html PUBtIC "V/W3C//DTD XHTMt
1.0 Transitional//EN"
"http://vjww.w3.org/TR/xhtmll/DTD/
xhtmll-transitional.dtd">
*tml xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Динамическое изменение цвета</title>
</head>
<script type="text/javascript"> продолжение •&
function changeBack () {
var theColor = document. forms[0].myColor.
value:
alert (theColor);
document. getElementByldC'myPara").
style. color = theColor:
if (theColor == "white") document. body.
style. backgroundColor = "black"
</script>
<body style="background-color: gray">
<form name="forml">
<p id="myPara">KaKMM цветом
раскрасить текст?</р>
<input type="text" name="myColor" />
<br />
<input type="button" уа!ие="Изменить"
onclick="changeBack()" />
</form>
</body>
</html>
В этом примере пользователь может самостоятельно ввести цвет в поле ввода myCol or, затем щелкнуть на кнопке Изменить. При этом вызовется функция changeBack(). Что происходит в этой функции? Введенное пользователем значение перехватывается и присваивается переменной theCol or, после чего определяется стиль всего абзаца. Функция также проверяет, не установлен ли цвет текста белым. В этом случае цвет фона изменяется на черный.
ПРИМЕЧАНИЕ
Скрипт, в принципе, работать будет, но слишком уж упрощен, поскольку совершенно не принимает в расчет неправильно введенное пользователем значение. Если вы действительно хотите реализовать такого рода алгоритм, следует это делать с использованием меню <select>, предлагая на выбор одно из имен цветов. Или можно создать и отдельную функцию, тестирующую введенные пользователем значения. Не следует забывать, что имена цветов нужно вводить по-английски.
Динамические классы и идентификаторы
В предыдущем параграфе вы узнали, что, оказывается, можно изменять отдельные свойства элементов, невзирая на то, какими они были. А что, если поменять не свойство, а сам идентификатор класса, изменив тем самым сразу несколько параметров? Ничего сложного в этом нет, и вы сами можете в этом убедиться, изучив листинг 19.14.
Листинг 19.14. Динамическое изменение классов CSS
<!DOCTYPE html PUBLIC "V/W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTO/
xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Динамические классы</title>
<style>
.big {font-size: 36: color: red}
.snail {font-size: 12: color: black}
</style>
<scrlpt type="text/javascript">
function changed ass() {
theClass = document. getElementByldC'myPara")
.className:
alert (theClass):
if (theClass!= "big") {
document. getElementById("myPara")
.className = "big":
}
else document. getElementByldC'myPara")
.className = "small":
</script>
</head>
<body>
<form name="forml">
<p id="myPara" сlass="small">Каким стилем
оформим текстик?</р> «input type=" button"
vаluе="Изменить" onclick="changeClass()" />
</form>
</body>
</html>
Итак, что мы имеем? Пользователь щелкает на кнопке Изменить, запуская тем самым функцию. В ней определяется текущее имя класса, используемого в качестве стиля абзаца. Оно присваивается переменной theClass. Потом проверяется, не является ли big значением theCl ass. Если не является, то именно это значение и присваивается. В противном случае theClass объявляется равным small. Таким образом скрипт при каждом нажатии на кнопку меняет стиль текста.
Это показано па рис. 19.12.
Рис. 19.12. Исходная страница (сверху) и та же страница после нажатия на кнопку (снизу). Изменился класс, а значит, и стиль текста
Резюме
Тесное сотрудничество технологий JavaScript и CSS дает результат, называемый Dynamic HTML. В те времена, когда Netscape и Internet Expolrer выпустили свои 4-е версии браузеров, аббревиатура DHTML просто не сходила с уст веб-разработчиков. Стараний было много, однако, как потом оказалось, очень во многом браузеры оказались несовместимыми друг с другом. Это, увы, замедлило процесс распространения DHTML.
Обе компании затем выпустили браузеры 5-го и 6-го поколений, и вот тогда картина уже несколько изменилась. Наконец-то в Netscape и Internet Explorer можно было найти поддержку CSS, причем как для создания стилей, так и для определения размещения элементов. Стало возможным программирование многих параметров стилей. И все стандартные браузеры стали воспринимать существующую действительность более или менее одинаково.
В этой главе вы узнали о свойствах и методах работы с CSSP, затем научились их программировать с помощью скриптов, причем делать это с расчетом на любые браузеры. Как оказалось, все-таки можно написать такую программу, которая будет подстраиваться под любые стандартные программы просмотра веб-страниц, включая Netscape 4.x.
|
|
|
|
|
Дата добавления: 2014-12-29; Просмотров: 344; Нарушение авторских прав?; Мы поможем в написании вашей работы!