Динамическое отображение текста веб-страницы
В этом разделе мы рассмотрим, какими способами можно динамически изменять текстовое содержание страницы. В предыдущих разделах, как иы помните, мы изменяли, как правило, только внешний вид текстовых ;элементов (цвет текста, начертание шрифта и т. д.). Однако иногда бывает нужно изменить “на ходу” непосредственно текстовое содержание.
Вообще-то говоря, в разделе 7.2 мы уже один раз немного изменяли текст, но это был текст на кнопке. Если помните, тогда мы меняли надписи Сде лать фон белым и Сделать фон зеленым. Надпись на кнопке изменялась при помощи значения атрибута VALUE= тега
<INPUT>
. Однако что делать, если текст, подлежащий изменению, не является кнопкой?
Давайте рассмотрим такой пример. Предположим, нам надо несколько усовершенствовать “Домашнюю страницу Сергея Сергеева”, которую мы создавали в Главах 1, 2 и 4. К примеру, нам хочется, чтобы сначала на странице отображался только вступительный текст и текст первого рас сказа. А при нажатии на ссылку вместо текста первого рассказа появлялся бы текст второго рассказа и т. д.
(Оказывается, это осуществить очень легко! Заключим для начала текст первого рассказа в блок <DIV> и присвоим ему уникальное имя:
<
DIV ID="rasskaz"> <Н2>ИВАН-ЦАРЕВИЧ И СЕРЫЙ ЗАЯЦ<ВР> OPAN STYLE="font-style: italic; ">cкaзкa</SPAN></H2>
<DIV STYLE="text-align: right;"> <DIV CLASS="epig"> Ну, погоди!.. <DIV CLASS="pdps">(Из мультфильма)</DIV> </DIV> </DIV> <BR>
<DIV CLASS="аЬ">Жил да был Иван-Царевич, и все у него было: и злато-серебро, и невест полный дворец, и книжек много умных, и тренажерный зал огромный. Однако тоскливо было у него на душе - как встанет утром с постели царской, так и начнет горевать, и горюет до вечера.</DIV>
<DIV CLASS="аЬ">Долго ли, коротко ли ...</DIV>
<DIV CLASS="аЬ">И они жили долго и счастливо и умерли в один день.</DIV>
<HR> </DIV> Теперь вместо ссылки на второй рассказ напишем просто
<SPAN onClick="show_hammer()">Рассказ «МОЛОTOK»</SPAN>
Как видите, теперь, если пользователь щелкнет мышью на словах Рассказ “Молоток”, то будет выполнена функция show_hammer(). По нашей задумке, она должна заменить текст сказки на текст рассказа “Молоток”.
Вспомним, что весь текст сказки был заключен в блок
<DIV>
. А у любого блока
<DIV>
, как и у большинства других элементов, имеется свойство innerHTML, значение которое содержит весь HTML-код данного элемента! Это означает, что если мы изменим значение этого свойства, изменится и HTML-V.OJS,, а значит, и текст, содержащийся на странице. Наша функция show_hammer() может выглядеть, например, вот так:
function show_hammer() { document .all. rasskaz . innerHTML=' <H2>MOЛOTOK<BR>
<SPAN STYLE="font-style: italic ;">paccкaз</SPAN></H2>
<DIV STYLE="text-align: right;">
<DIV CLASS="epig">Mы кузнецы, и дух наш молод.<DIV CLASS="pdps">(Из песни) </DIV></DIV></DIV><BR>
<DIV CLASS="аЬ">Это случилось очень давно, уж и не помню в каком году, в каком веке и в каком тысячелетии. . . (Здесь располагается текст рассказа) </DIV>;
}
Как видите, эта функция выполняет всего одно действие — присваивает свойству document.all. rasskaz. innerHTML значение, содержащее длинную-предлинную строку. В этой строке содержится весь HTML-код, рассказа “Молоток”
