Пример 4 Управление форматированием абзаца с помощью сценария
В следующем варианте решения задачи размещать абзац и заголовки поручим сценарию. Сначала документ загружается. Параметры, задающие цвет шрифта и размещения, будут теми, которые задаются по умолчанию. В документе зададим две кнопки, при щелчке на одной из кнопок форматируются все абзацы, при щелчке на второй форматируются все заголовки. Рассмотрим выполнение сценария при форматировании абзацев. Все объекты, расположенные на странице, содержатся в наборе document.all. Нам необходимо из всех объектов, расположенных на странице, выделить только абзацы. Для этого воспользуемся методом tag(), указав в качестве параметра имя тега интересующего нас элемента:
Var par=document.all.tags(‘a’). Количество абзацев на странице содержится в свойстве length и сохраняется в переменной l с помощью присваивания l=par.length. Далее в цикле последовательно просматриваются абзацы и трём текущим абзацам присваиваются соответствующие классы форматирования с помощью изменения значения свойства className элемента par[I]:par[I].className=’elleft’.
После окончания цикла в зависимости от числа абзацев на странице требуется просмотреть один или два элемента. При форматировании заголовков поступаем аналогично. Теперь выделенный набор определяется оператором
var par=document.all.tags('h5')
Далее в цикле последовательно обрабатываются все заголовки уровня 5, имеющиеся на странице.
Наберите следующий код
<html>
<head><title> форматирование текста из сценария </title>
<style>
<!--
p.elleft {color:red; text-align:left}
p.elcenter {color:green; text-align: center}
p.elright {color:blue; text-align: right}
h5.elleft {color: red; text-align:left}
h5.elcenter {color: green; text-align: center}
h5.elright {color:blue; text-align:right}
//-->
</style>
<Script>
<!--
function chpar()
{
var par=document.all.tags('p')
var l=par.length
var d=l%3
var n=l-d
for (var i=0; i<=n-1; i=i+3)
{par[i].className='elleft'
par[i+1].className='elcenter'
par[i+2].className='elright'
}
if (d>=1)
par[n].ciassName='elleft'
if (d>=2)
par[n+1].className='elcenter'
}
function chhead()
{
var par=document.all.tags('h5')
var l=par.length
var d=l%3
var n=l-d
for (var i=0; i<=n-1; i=i+3)
{par[i].className='elleft'
par[i+1].className='elcenter'
par[i+2].className='elright'
}
if (d>=1)
par[n].ciassName='elleft'
if (d>=2)
par[n+1].className='elcenter'
}
//-->
</script>
</head>
<body>
<form>
<INPUT TYPE="button" value="Абзац" onClick="chpar()">
<input type="button" value="Заголовок" onClick="chhead()">
</form>
<h5>Диана</h5>
<p> Диана почиталась как богиня охоты, владычица зверей.
В произведения искусства Диана чаще всего предстает вооруженной луком со стрелами, в сопровождении собак или лани.
</p>
<h5> Гермес </h5>
<p> Гермес – вестник богов, проводник душ умерших в подземное царство Аида, а также хитрый и изворотливый покровитель торговли.
Иногда Гермес почитался и как покровитель искусства. </p>
<h5>Амур</h5>
<p>Амур – крылатый бог любви, сын Венеры, ее посланник и неизменный спутник. Стрелы Амура, пронзая сердца богов и людей, пробуждали
любовь. </p>
<h5>Афродита</h5>
<p> В античной мифологии Афродита - богиня любви и красоты,
покровительница брака. Во многих мифах Афродита воспевалась как богиня
плодородия, дарующая жизнь растительному и животному миру. </р>
<h5> Гера </h5>
<p>В античной мифологии Гера – супруга Зевса, главная среди богинь Олимпа, покровительница брака и семьи.
В произведениях искусства богиня Гера изображалась в диадеме,
со скипетром, часто с символом звездного неба – павлином. </p>
<h5>Кипарис</h5>
<p> Античный миф: Кипарис случайно убил на охоте своего любимого
ручного оленя. Видя, как юноша тоскует, Аполлон превратил его в стройный кипарис – символ печали. </p>
<h5>Нарцисс</h5>
<p>Античный миф: Нарциссу при рождении было предсказано, что он будет
жить до тех пор, пока не увидит самого себя. Однажды во время охоты в
жаркий полдень юноша склонился над чистым источником, чтобы утолить
жажду. Позабыв о сне и пищи, Нарцисс проводил дни и ночь на берегу,
любуясь своим отражением, и умер от тоски. Бог превратил его в цветок, который стали называть нарциссом.
</р>
</html>
Задание по примеру 4.
Создайте новые кнопки «Абзац2», «Заголовок2» и опишите функции по аналогии, которая сформатирует все объекты в противоположную строну.
Класс для всех элементов страницы
Если класс должен применяться ко всем элементам документа, то при определении класса тег не задаётся, а описание начинается с точки.
Пример 5
<style>
<!- -
.elred {color: red}
.elblueBgrd {background: Blue}
//- - >
<style>
Задание к примеру 5
Используйте данный приём к примеру 2. Продемонстрируйте преподавателю.
Изменение свойств элемента при действиях пользователя.
Пример 6
Свойства элемента можно изменять в результате реакции на события, связанные с элементом. Создадим документ, в котором при попадании курсора мыши на текст заголовка изменяется цвет шрифта. При перемещении курсора мыши с области заголовка восстанавливается первоначальный цвет шрифта.
<HTML>
<HEAD><TITLE>ИЗМЕНЕНИЕ ЦВЕТА ЗАГОЛОВКА </TITLE></HEAD>
<BODY bgColor=silver>
<H3 align=center onmouseout="this.style.color='black' "
onmouseover="this.style.color='white' ">
Изменение цвета заголовка </H3>
</BODY>
</HTML>