★ Несколько слов о методе document.write()
★ Как вывести текст с помощью document.write()
★ Идентификатор в коде вывода document.write() перейти↓
★ Перенос строки в методе document.write() перейти↓
★ Как вывести картинку методом document.write() перейти↓
★ Как скрыть и снова отобразить картинку методом document.write() перейти↓
★ Вывод числовой переменной методом document.write перейти↓
★ Текст в рамке методом document.write() перейти↓
★ Новое окно JavaScript и метод document.write() перейти↓
★ Открытие и закрытие нового окна
★ Вид нового окна
★ Имя нового окна
★ Фон нового окна, размер нового окна
★ Вывод текста, рисунка и таблицы в новом окне
★ Увеличение размера изображения в новом окне
★ Изменение шрифта в новом окне
★ Задержка в новом окне
★ Ссылка в новом окне
★ Внутренний стиль CSS в новом окне
★ Открываем новое окно CSS из нового окна JavaScript
★ Таблица с помощью метода document.write() перейти↓
★ Принцип создания таблицы
★ Таблица с несколькими ячейками
★ Динамическое изменение содержимого ячейки
★ document.write и CSS перейти↓
★ document.write в новом окне CSS перейти↓
Несколько слов о document.write
Метод document.write() используется, в основном, для вывода текста, хотя
имеет и ряд других применений (вывод изображения, создание нового окна и др.).
Расшифруем код document.write(). Первое слово document указывает на объект, с которым
мы имеем дело. Это документ HTML. Слово write обозначает метод, который применяется
к документу (что-то пишу). В круглых скобках указывают то, что мы хотим сделать
с помощью метода document.write(). Другими словами, какие именно изменения мы хотим
сделать в HTML-ном документе.
Как вывести текст с помощью document.write
В самом примитивном случае для того, чтобы вывести текст с помощью
document.write(), достаточно поместить его в круглые скобки и заключить его в кавычки.
Пусть таким текстом будет: Вывод текста с помощью document.write().
Тогда код вывода будет выглядеть так:
document.write("Вывод текста с помощью document.write()"). Очень важно: кавычки, в которые
заключается текст, должны быть ДВОЙНЫМИ.
На экране монитора мы увидим: Вывод текста с помощью document.write()
Цвет и размер шрифта Для того, чтобы вывод приобрел сочность, яркость, цвет и нужный нам
размер, необходимо задать тексту стиль. Стиль можно задать, как вне кода вывода,
т.е. до строчки document.write(), так и в самом коде вывода document.write()
между круглыми скобками.
1-й способ - стиль задается с помощью CSS. Пусть нужно вывести слово: text. Зададим это слово как строковую переменную
sp, поместив код стиля перед указанием переменной (все это делается в скрипте,
т.е. между <script> и </script>):sp="<span style='...'>"text"</span>". Между тегами
<span и </span> задается стиль переменной, т.е. ее дизайн (размер шрифта, его цвет).
Он записывается в кавычках после style= (заметим, что кавычки должны быть одинарными,
а не двойными). В результате весь код вывода будет таким.
<script>
sp="<span style='font-size:55px;color:red; font-weight:bold'>text</span>"
document.write(sp)
</script>
Результат вывода:
text
Заметим, что в стиле мы задали: размер шрифта, его цвет и указали, что шрифт
будет жирным. Размер шрифта обычно указывается в пикселях (рх) и может быть
произвольным.
Стиль можно задать и в самом коде вывода.
<script>
document.write("<span style='font-size:45; color:violet'>text</span>")
</script>
Результат вывода:
Замечание
Стиль, о котором говорилось выше, именуется встроенным. В принципе допустимо и
использование внутреннего стиля, который задается до скрипта, содержащего
document.write, между тегами <style> и </style>. Однако, учитывая сложные
взаимоотношения CSS и document.write смотри здесь, внутренний стиль работает не всегда.
Поэтому использование встроенного стиля оказывается предпочтительным.
2-й способ - стиль задается в коде вывода (с помощью HTML) Стиль переменной задается не отдельной строчкой (переменная sp),
а непосредственно в коде вывода переменной. Для этого в круглых скобках кода
document.write()после имени выводимой переменной надо поставить точку и следом
указать размер шрифта и его цвет:
document.write(sp.fontsize (6).fontcolor('red'))
Результатом вывода будет появление на экране монитора слова text
Приведем скрипт
<script>
sp="text"
document.write(sp.fontsize (6).fontcolor('red'))
</script>
Результат вывода:
В этом способе размер шрифта можно менять только скачками (целые числа от 1 до 7).
Выводимый текст можно задать с помощью переменной.Например, предложение
"Здесь пишем выводимый текст" можно задать как переменную w и в коде вывода document.write
записывать не предложение, а всего-навсего один символ w. При этом очень важно учитывать
такую особенность.
Если описание стиля входит в задание выводимой переменной:
w="<p span style='font-size:30;color:red'>Здесь пишем выводимый текст</span>"
то в коде вывода указывается просто символ этой переменной
document.write(w)
document.write воспримет w как переменную с заданным стилем.
Если же в задании переменной стиль отсутствует,
w="Здесь пишем выводимый текст",
а стиль указывается непосредственно в коде вывода:
document.write("<span style='font-size:30;color:red'>"+w+"</span>")
то символ переменной записывается между парой кавычек и парой знаков плюс ("+w+")
Такая запись ("+w+") объединяет две строки, и document.write воспримет w не
как символ, который надо вывести c заданным стилем, а как содержание переменной w в
предыдущей строке. Иначе (если записать просто w), то document.write будет считать, что
стиль относится к символу w.
Если параметры шрифта заданы массивом
Рассмотрим еще один способ применения стиля к document.write непосредственно в коде вывода.
Пусть мы хотим вывести слово "Т е к с т" различным цветом и различными размерами.
Зададим необходимые цвета в виде массива.
col = ["red ", "green","#ff00ff", "blue"]
Если стиль задается с помощью HTML, то массив размеров шрифта можно не задавать, т.к.
в этом случае используются целочисленные значения от 1 до 7, и можно
просто использовать переменную цикла, которая меняется на единицу.
Добавляем стиль (параметры шрифта) в код вывода document.write
<font face='Times New Roman';font size='6';font color='"+col[i]+"'>
Здесь вместо конкретного кода цвета указываем переменный параметр шрифта ( компонент
массива col[i]). Поскольку стиль в коде вывода document.write, заключаем эту переменную
в "+ +". Т.к. параметры шрифта заключены в кавычки '', "+col[i]+" тоже заключаем в
одинарные кавычки ''.
Окончательный вид кода вывода (со стилем)
document.write("<font face='Times New Roman';font size='6';font color='"+col[i]+"'>Т е к с т</font>")
Строкой document.write(col[i].fontsize (4)) выводим код цвета.
В целом скрипт примера выглядит так.
<script>
col = ["red ", "green","#ff00ff", "blue"]
for (var i=0; i<4; i++)
{
document.write(col[i].fontsize (4)) //Вывод i
document.write("<font face='Times New Roman';font size='6';font color='"+col[i]+"'>Т е к с т</font>")
}
</script>
Результат работы скрипта.
Если в коде вывода сделать 2 изменения: в параметре размера шрифта цифру заменить
на переменную цикла i и сделать перенос строки
document.write("<font face='Times New Roman';font size='"+i+"';font color='"+col[i]+"'>Т е к с т</font><BR>")
то слово "Т е к с т" будет выводится столбиком и разным размером.
Как видно, HTML-ный способ задания размеров шрифта создает узкие рамки для его
использования в стиле. Гораздо шире возможности задания стиля с помощью CSS.
Поскольку здесь можно задавать размер шрифта в широких пределах, в скрипте нужно
задавать массив размеров шрифта.
Приведем скрипт для вывода с помощью CSS.
<script>
function WCS()
{
col = ["#000", "green","red", "#b22222", "blue","#f0f","#8000aa"]
raz= ["10px","20px","30px","40px","45px","50px","60px"]
for (var i=0; i<7; i++)
{
document.write(raz[i]) //Вывод размера шрифта
document.write("<span style='font-family: Times New Roman;color:"+col[i]+";font-size:"+raz[i]+"'> Т е к с т</span><BR>")
}
}
</script>
<input type="button" value=см.CSS OnClick="WCS()">
Идентификатор в коде вывода document.write
Если, помимо задания стиля, мы хотим что-нибудь сделать с выводимой информацией
(например, скрыть ее, вывести с задержкой и пр.), нам понадобится идентификатор,
который записывают между тегами <style> и </style>.
<style>
#iden{здесь указываем действия, которые будут произведены при обращении
к идентификатору (iden - имя идентификатора)}
</style>
Если внутренний стиль (между тегами <style> и </style>) не работает
(причину смотри здесь), то идентификатор можно задать во встроенном стиле ( в коде
задания стиля самой переменной).
<script>
y="<span id='iden' style='font-size:45; color:violet'>text</span>"
document.write(y)
</script>
Использование идентификаторов при выводе с помощью document.write можно посмотреть
в последнем разделе этой страницы "document.write в новом окне CSS". Перенос строки в методе document.write
Чуть подробнее о переносе строки в document.write.
Если текст находится непосредственно в коде вывода, достаточно поставить <BR> до
или после текста:
document.write("<BR>текст")
Если текст задан как строковая переменная:
sp="text"
document.write("<BR>"+sp)
Если в переменной (текст)задается стиль
sp="<span style='font-size:35px;color:red'><BR>текст</span>"
document.write(sp)
Удобно задавать код переноса в виде строковой переменной: br="<BR>". В этом случае
переменная 'br' ставится в коде вывода после открывающей скобки вместе
со знаком плюс (+)
sp="text"
br="<BR>"
document.write(br+sp.fontsize (6).fontcolor('red'))
Подобным образом можно обращаться и с другими связующими знаками (знак
равенства, двоеточие и др.).
Приведем пример вывода большого текста.
<script>
function WP()
{
s1="От горящих свечей по комнате распространился густой,тяжелый, пряный запах,
вызывающий головокружение и одновременно странную легкость в теле.Сильвия пришла
вовремя. Новиков открыл дверь и буквальным образом обалдел. Она не воспользовалась
его советом и придумала себе совсем другой облик. <BR>Наверное, она знала лучше, как
должна выглядеть жрица майя или еще какой-нибудь забытой цивилизации.
Когда Андрей говорил с ней, он держал в воображении экстрасенсоршу типа пресловутой
Джуны, а тут перед ним стояла красавица из легенд. Чьих? <BR>Возможно, даже атлантских.
Лицо и открытые выше локтей руки покрывал нежный, персикового оттенка загар. Пышные,
цвета красного дерева волосы стягивал золотой обруч, <BR>украшенный сапфирами. И такого
же сапфирового тона глаза с поблескивающими в них искрами сияли на ее невыразимо
прекрасном лице. Одета Сильвия была в свободную бледно-фиолетовую тунику."
document.write(s1.fontsize (4).fontcolor('red'))
}
</script>
Нужно помнить, что в коде строковой переменной, содержащей текст, нельзя разрывать строку,
поэтому в текстовом редакторе большой текст текст дает длинную строку, что вызывает
неудобство при ее редактировании. В этом случае целесообразно разбить строку на части,
каждую из которых задать как отдельную строковую переменную. Затем следует свести их в
новую переменную путем суммирования и именно ее указать в коде вывода document.write.
s1="<span style='font-size:35px;color:red'>1часть текста</span>"
s2="<span style='font-size:35px;color:red'>2 часть текста</span>"
s3="<span style='font-size:35px;color:red'>3 часть текста</span>"
s=s1+s2+s3
document.write(s)
Получим части текста,соединенные в одну строку:1часть текста2часть текста3часть текста.
Чтобы посмотреть сводку основных приемов вывода информации с помощью
document.write, нажми кнопку"сводка"
Как вывести картинку в методе document.writeОчередной скрипт содержит коды вывода изображения с помощью метода document.write
</head>
<script>
w="<img SRC='619.jpg' width=600 height=400>"
document.write(w)
</script>
<body>
Как скрыть картинку в методе document.write
Если нужно скрыть, а потом снова отобразить картинку, используем скрипт
z="<img id='mypict' SRC='18.jpg' width=300 height=200>"
document.write(z) //выводим картинку
setTimeout("document.getElementById('mypict').style.display='none'",2000)
//через 2 секунды скрываем картинку
setTimeout("document.getElementById('mypict').style.display='block'",4000)
//через 4 секунды снова отображаем картинку
Пояснение: в код рисунка нужно ввести произвольный идентификатор (в
данном случае - mypict).
Вывод числовой переменной в методе document.write Рассмотрим как вывести на экран результат математического выражения.
Пусть нужно вывести результат формулы, записанной как числовая переменная s.
s=((23*7)-4)/10.Результат математической операции содержится в числовой переменной.
Однако, document.write воспринимает его как строковую переменную, поэтому в коде
вывода переменную s заключать в кавычки не надо. А вот если мы хотим видеть на
экране и саму формулу, то переменную s надо задать как новую переменную,
но уже строковую по смыслу (ss).
s=((23*7)-4)/10
ss="((23*7)-4)/10"
q="s"
r="="
document.write(ss+r+s)
С целью экономии места коды скрипта записаны без стиля,
поэтому результат будет выглядеть так:((23*7)-4)/10=15.7
Текст в рамке методом document.write Рассмотрим, как поместить текст в рамку. Для этого потребуется следующий код
st="<p align = center><BR><TABLE border=4 bordercolor='#ff00ff'>"
s1="<span style='font-size:40;color:red'>Текст в рамке</span>"
st1=st+"<TR><TD bgcolor='#00ff00'>"+s1+"</TD></TR></TABLE>"
document.write(st1)
Вот что мы увидим на экране
Новое окно JavaScript и метод document.write()
Для вывода на экран дополнительной информации используют открытие нового окна.
Такое окно можно создать как средствами JavaScript, так и средствами CSS(смотри).
Здесь будет рассмотрено новое окно JavaScript, контент которого создается
методом document.write. Это окно называют дочерним по отношению к исходному окну,
которое именуют родительским.
Открытие и закрытие нового окна
Скрипт открытия и закрытия нового окна.
<script>
function WP()
{
myWindow = window.open("","","width=650,height=400,left=400,top=150");
w='Это новое окно JavaScript'
myWindow.document.write(w.fontsize (7).fontcolor('blue'))
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
}
</script>
<body>
<input type="button" value="write" onClick="WP()">
Открывается новое окно кодом
myWindow = window.open("","","width=650,height=400,left=400, top=150");
Здесь myWindow - переменная, к которой привязываются все коды содержимого нового окна
(без нее коды будут выполняться в исходном (родительском окне).
Далее следует непосредственно код открытия window.open. За ней следуют три пары кавычек.
В первых может быть указан адрес файла, который открывается в новом окне. Если мы хотим
оставаться в текущем окно, то первая пара кавычек остается пустой. Вторая пара кавычек
может содержать имя нового окна (о нем чуть позже). Наконец, третья пара кавычек задает
параметры нового окна.
Синтаксис открытия нового окна: window.open("url", "name", params):
url - адрес файла, который следует загрузить в ново окно
name - имя нового окна. У каждого окна есть свойство window.name, с помощью которого
можно узнать, какое окно используется как дочернее. Если уже существует окно с заданным
именем, то файл, указанный в параметрах URL откроется не в новом окне, а в окне, уже
имеющим такое имя.
params - строка параметров для нового окна. Содержит настройки, разделённые запятыми.
Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100.
Параметры в строке params:
Позиция окна: left/top (числа) – задают место открываемого окна на экране браузера.
width/height(числа) – ширина и высота нового окна. Существуют ограничения на
минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
Новое окно можно закрыть несколькими способами. Проще всего - кликнуть по крестику
в верхнем правом углу. Можно создать кнопку "закрыть новое окно". Как было указано выше,
для этого используется код
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
Можно предусмотреть автоматическое закрытие окна через определенное время
после его открытия, используя задержку
myWindow.setTimeout("close()",4000)
Вид нового окна
В зависимости от кода открытия нового окна его внешний вид имеет такие разновидности.
Окно без названия (имени) и без панели инструментов
<script>
function openind1(){
var OpenWindow=window.open("", "", "height=300,width=300,left=120px");
Коды, задающие фон и текст
}
</script>
<body>
<input type="button" value="Посмотри" onClick="openind1()">
Окно с названием (именем)
Обратите внимание, что термины "название" и "имя" применительно к новому окну являются
синонимами. Они задаются внутри вторых кавычек кода window.open. Если эти кавычки остаются
пустыми, браузер автоматически запишет на верху окна "без названия". Чтобы вместо "без
названия" на этом месте появился текст, соответствующий имени (названию) окна, в скрипте
необходимо указать следующее. В коде открытия окна в первую пару кавычек вставить
about:blank
а также строку с кодом самого названия (в нашем случае имя, или название окна: 3 окно)
var OpenWindow=window.open("about:blank", "", "height=300,width=300,left=400px);
OpenWindow.document.write("<TITLE>3 окно</TITLE>")
Скрипт такого окна будет следующим.
<script>
function openind2(){
var OpenWindow=window.open("about:blank", "", "height=300,width=300,left=400px);
OpenWindow.document.write("<TITLE>3 окно</TITLE>")
Коды, задающие фон и текст
}
</script>
<body>
<input type="button" value="Посмотри" onClick="openind2()">
Окно с панелью инструментов
Обратите внимание, что окно с панелью инструментов должно содержать только
2 пары кавычек. Если использовать третью пару кавычек, задающих параметры окна,
панель инструментов исчезает. Окно открывается в стандартном неизменяемом размере
(правда, его можно увеличить до размера экрана).
<script>
function openind3(){
var OpenWindow=window.open("", "");
Коды, задающие фон и текст
}
</script>
<body>
<input type="button" value="Посмотри" onClick="openind3()">
Имя нового окна
Как было отмечено выше, имя окна (или, что тоже самое, его название) указывается во второй
паре кавычек кода window.open. Подчеркнем, что имя окна - это не имя переменной, с помощью
которой оно открывается. В приводимом ниже примере переменная, соответствующая открытию нового
окна, обозначена как myWindow (в принципе, имя этой переменной может быть любым). Эта переменная
необходима для последующего обращения к новому окну.
Во второй паре кавычек (в круглых скобках кода вывода всего таких пар три) укажем имя
нового окна (myName). Для вывода имени нового окна с помощью метода document.write
используем код myWindow.name - тогда имя окна появится в самом окне. Если же внутри первой
пары кавычек в коде открытия окна window.open вставить about:blank и добавить строку кода в
скрипте: myWindow.document.write("<TITLE>myName</TITLE>"),то имя окна появится и в полоске
на верху нового окна.
<script>
function NameWind() {
var myWindow = window.open("about:blank","myName","width=200, height=300");
myWindow.document.write("<TITLE>myName</TITLE>")
myWindow.document.write("Это окно имеет имя: " + myWindow.name.fontsize (5).fontcolor('blue'));
}
</script>
<input type="button" value=посмотри onClick="NameWind()">
Обратите внимание, что myWindow - это вовсе не имя окна. Но только с помощью этой
переменной Вы можете получить доступ к окну, например, вывести в новое окно текст,
изображение, кнопку, ссылку и т.п. Что касается имени нового окна, то его использование
имеет смысл только при открытии нескольких новых окон. При открытии единичного окна его
имя можно просто игнорировать, оставляя вторую пару кавычек в коде window.open("","","")
без заполнения.
Когда мы открываем второе, третье и т.д. новое окно, и оставляем их безымянными, то
они ведут себя независимо друг от друга. Это означает, что каждому окну можно задать
свои размеры, расположить их произвольно в окне браузера и т.п. Такая ситуация реализуется
и в том случае, если окна наделяются различными именами.
Но ситуация меняется, если при открытом окне с заданным именем открыть еще одно окно
с тем же самым именем. В этом случае мы не увидим появление нового окна - просто его
контент появится в первом окне. Другими словами, второе окно открывается в первом,
дополняя его контент. Окна перестают быть независимыми, а становятся связанными.
Проиллюстрируем сказанное примером. Нажмите кнопку "смотреть-nz". Появится окошко,
из которого открываем два окна с разными именами (во вторых кавычках кода window.open у
первого окна стоит one, у второго - second). Эти окна ведут себя независимо друг от друга:
для них выполняется коды left и top, их можно расположить в окне браузера по-раздельности,
им можно задать разный фон и разные размеры. Соответственно, эти окна закрываются
по-отдельности. То же самое будет и в том случае, если вторые кавычки у обоих окон будут
пустыми (т.е. окна - безымянные).
Теперь кликните по кнопке "смотрете-z". Также открываем два окна, но они имею одно и то
же имя (dwin). В этом случае окно 2 открывается в окне 1 и они образуют единое целое (как бы
сливаются). Окно 2 оказывается зависимым от окна 1: в этих окнах параметры left и top,
заданные в первом (родительском по отношению ко 2-му окне) действуют и во 2-ом окне, сколько
бы мы не меняли их для второго окна. 2 окно будет иметь тот же фон и те же размеры, что и
окно 1. Соответственно закрытие 2 окна сопровождается закрытием и первого окна и наоборот,
т.е. они закрываются одновременно.
Приведем еще одну иллюстрацию практического использования имени нового окна. Оно
касается последовательного вывода контента в новое окно. По ряду причин (проблемы блокировки
всплывающих окон, сохранение компактного размера окна при большом объеме выводимой инормации,
нежелательность множить всплывающие окна и др.) иногда возникает необходимость
оставаться в рамках одного нового окна. В этом случае можно воспользоваться вариантом
последовательного изменения контента в одном окне, что выглядит как переворачивание страниц.
Очередное новое окно - это новая страница. При этом закрытие последнего окна не оставляет
никакого следа от всех окон. Для этого в скрипте создаются коды открытия нескольких окон
с ОДИНАКОВЫМ именем. Тогда каждое последующее окно будет открываться в самом первом.
Чтобы при открытии последующего окна исчезал контент предыдущего окна используется код
document.body.innerHTML=""
В скрипте содержаться несколько функций-по числу окон.
Код открытия каждого окна задается переменной xow. Имя этой переменной можно
использовать во всех функциях.
Приводимый ниже пример штатно работает в браузерах: Google, Yandex, Edge.
<script>
function SWW()
{
var divContent = document.getElementById("pas").innerHTML;
var xow = window.open('', 'mvd', 'width=450,height=550, left=200px');
xow.document.write("<BODY BGCOLOR='cyan'>")
xow.document.write(divContent);
s2="<p align=center><span style='font-size:20;color:red'>Текст, выведенный по кодировке в скрипте<BR></span>"
xow.document.write(s2)
img1a="<img id='timt' src='700.jpg' width=300px>"
xow.document.write(img1a)
img1b="<img id='tamt' src='730.jpg' width=300px>"
xow.document.write(img1b)
xow.document.write("<FORM><BR><INPUT TYPE=button VALUE='Перейти на стр. 2' ONCLICK=opener.WW1()></FORM>")
xow.document.getElementById('d5').style.display='block'
xow.document.getElementById('ts').style.display='block'
xow.document.getElementById('ts1').style.display='block'
xow.document.getElementById('ts2').style.display='block'
}
function WW1()
{
var xow = window.open('', 'mvd', 'width=450,height=550, left=200px');
xow.document.body.style.background = '#7cfc00'
xow.document.body.innerHTML=''
s2="<p align=center><span style='font-size:30;color:blue'<BR>-страница 2-</span><BR>" //строку не разрывать
xow.document.write(s2)
s0="<p align=center><span style='font-size:27;color:green'>показываем и скрываем картинки</span><BR><BR><BR>" //строку не разрывать
xow.document.write(s0)
xow.img1b="<p align=center><img id='raz' src='710.jpg' style='margin-top:-190px;margin-left:20;' width=200;></p>"
xow.setTimeout(" document.write(img1b)",600)
xow.img1d="<img id='dva' SRC='715.jpg' style='margin-top:-10px;margin-left:130;' width=200>"
xow.setTimeout(" document.write(img1d)",2000)
xow.setTimeout("document.getElementById('raz').style.display='none'",6000)
xow.setTimeout("document.getElementById('dva').style.display='none'",6000)
xow.document.write("<FORM><BR><BR><BR><BR><BR><BR><BR><INPUT TYPE=button VALUE='Перейти на стр. 3' ONCLICK=opener.WW2()><BR></FORM>")
}
function WW2()
{
var xow = window.open("","mvd","width=500,height=480,left=220, top=150,");
xow.document.body.style.background = 'yellow'
xow.document.body.innerHTML=''
s1="<p align=center><span style='font-size:30;color:green'>-страница 3-</span><BR><BR><BR>" //строку не разрывать
xow.document.write(s1)
s2="<p align=center><span style='font-size:27;color:blue'>САЛЮТ!</span><BR><BR><BR>" //строку не разрывать
xow.document.write(s2)
xow.ww="<img SRC='74US.gif' width=300 height=300>"
xow.setTimeout(" document.write(ww)",700)
xow.t="<p align=center><span style='font-family: Monotype Corsiva;font-weight: bold;font-size:42;color:red'>КОНЕЦ</span>"
xow.setTimeout(" document.write(t)",2000)
xow.setTimeout("close()",4000)
}
</script>
<body>
<div id="pas">
<style>
#timt{
position:absolute;margin-top:150px;margin-left:60;
-webkit-transition:2s ;
}
#timt:hover{
opacity:0.00;
}
#tamt{
opacity:0.00;
position:absolute;margin-top:150px;margin-left:60;
-webkit-transition:2s ;
}
#tamt:hover{
opacity:1.00;
}
#d5{display:none;position:absolute;margin-top:20px;
margin-left:160;font-size:25;color:red;
}
#d5a{display:none;position:absolute;margin-top:20px;margin-left:160;
font-size:25;color:red;
}
#ts{display:none;font-size:20px;color:blue}
#ts1{display:none;font-size:20px;color:f0f;position:absolute;margin-top:270px;margin-left:120;}
#ts2{display:none;line-height:10px;font-size:10px;color:f0f}
</style>
<p id="d5">страница 1</p><BR><BR><BR><BR><BR><BR>
<span align=center id="ts">Текст, выведенный по кодировке в div</span>
<p id='ts1' align=center>Наведи курсор на фото,<BR>потом еще раз</p>
</div>
<input type=button value="посмотрите" onClick="SWW()">
страница 1
Наведи курсор на фото
Текст, выведенный по кодировке в divПодведите курсор к фото
Фон нового окна, размер нового окна
Фон нового окна задается кодом
myWindow.document.write("<BODY BGCOLOR='yellow'>")
или
myWindow.document.body.style.background = 'pink'
Изменение размера производят с помощью кода
window.resizeBy(120,100)
В скобках первая цифра задает изменение ширины, вторая - высоты нового окна.
Для увеличения размера перед цифрами можно ничего не ставить при уменьшении -
ставят знак минус. СКРИПТ
<script>
function WP2()
{
myWindow = window.open("","","width=550,height=500,left=400, top=150");
myWindow.document.write("<BODY BGCOLOR='#00FF00'>")
setTimeout("myWindow.document.body.style.background = 'cyan'",1500)
myWindow.setTimeout("window.resizeBy(120,100)",3000)
setTimeout("myWindow.window.resizeBy(-300,-450)",5000)
w='<p align=center>В этом окне меняем фон и размер нового окна'
myWindow.document.write(w.fontsize (6).fontcolor('red'))
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
}
</script>
<body>
<input type="button" value="write" onClick="WP2()">
Вывод текста, рисунка и таблицы в новом окне
Ниже приводится скрипт вывода в новое окно текста, рисунка и таблицы.
<script>
function opnw1b() {
var myWindow= open("", "", "width=400,height=500");
myWindow.document.write("<BODY BGCOLOR='cyan'>")
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
r="<p align=center><span style='font-size:30;color:blue'><BR>В этом окне мы выводим текст,
рисунок и таблицу</span>" //строку не разрывать
myWindow.document.write(r)
myWindow.document.write(r)
myWindow.document.write("<p align=center><BR><img SRC='1.jpg' width=150 height=100>")
myWindow.document.write("</font></center>");
myWindow.document.write('<p align=center><BR><BR><table border="3px" borderColor=blue
style=" text-align: center;">'); //строку не разрывать
myWindow.document.write('<tr><td style="width: 30px; font-size: 30px; color:red ">1</td></td>');
myWindow.document.write('<td style="width: 30px; font-size: 30px; color:red ">2</td></td></tr>');
myWindow.document.write('<tr><td style="width: 30px; font-size: 30px; color:red ">3</td></td>');
myWindow.document.write('<td style="width: 30px; font-size: 30px; color:red ">4</td></td></tr>');
myWindow.document.write('</table>');
}
</script>
<body>
<input type="button" value="write" onClick="opnw1b()">
Увеличение размера изображения в новом окне
Текст Для увеличения размера изображения в новом окне используем событие onmouseover.
<script>
function opnw2() {
var myWindow= open("", "", "width=400,height=400");
myWindow.document.write("<BODY BGCOLOR='#3cb371'>")
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
myWindow.document.write("<BR><BR><p align=center><img src='1.jpg' width=150
onmouseover='this.style.width=300' onmouseout='this.style.width=150'>"); //строку не разрывать
myWindow.document.write(r)
r="<p align=center><span style='font-size:30;color:blue'><BR>В этом окне наведением курсора на рисунок
увеличиваем его размер</span>" //строку не разрывать
myWindow.document.write(r)
}
</script>
<body>
<input type="button" value="write" onClick="opnw2()">
Изменение шрифта в новом окне
Текст
<script>
function opnw3() {
var myWindow= open("", "", "width=400,height=400");
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
text3="<p align=center><span style='font-size:30;color:blue'><BR>В этом окне мы изменяем шрифт
текста в новом окне</span>" //строку не разрывать
myWindow.document.write(text3)
a5="<BR><BR><BR><span id='tdm' style='font-size:40;color:000'>меняем
шрифт</span><BR>" /*строку не разрывать*/
myWindow.document.write(a5)
myWindow.setTimeout("tdm.style.fontFamily = 'Monotype Corsiva'",1200)
myWindow.setTimeout("tdm.style.fontSize='75px'",2200)
myWindow.setTimeout("tdm.style.color='#f0f'",3100)
myWindow.setTimeout("tdm.style.fontFamily = 'Arial'",4200)
}
</script>
<body>
<input type="button" value="write" onClick="opnw3()">
Задержка в новом окне
Для задержки используем метод setTimeout.
<script>
function opnw5() {
var myWindow= open("", "", "width=400,height=400");
myWindow.document.write("<BODY BGCOLOR='#00fa9a'>")
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
r2="<p align=center><span style='font-size:30;color:blue'><BR>В этом окне с задержкой выводится и
скрывается рисунок</span>" //строку не разрывать
myWindow.document.write(r2)
myWindow.img1="<p align=center><img id='mypict' src='1.jpg' style='width:300; height:170;'>"
myWindow.setTimeout('document.write(img1)',1500)
myWindow.setTimeout("document.getElementById('mypict').style.display='none'",5000)
}
</script>
<body>
<input type="button" value="write" onClick="opnw5()">
Ссылка в новом окне
Код ссылки в новом окне
myWindow.document.write("<a href='адрес документа'>открыть ссылку</a>
Если по адресу ссылки выводится рисунок, то его размер диктуется оригиналом.
Самый простой способ вывести в новом окне рисунок с заданным нами размером
можно реализовать с помощью следующего скрипта.
<script>
function opnw5() {
var myWindow= open("", "", "width=400,height=500");
myWindow.document.write("<BODY BGCOLOR='#3cb371'>")
myWindow.document.write("<FORM><INPUT TYPE=button VALUE='закрыть окно' ONCLICK=self.close()></FORM>")
myWindow.document.write("<img SRC='http://av.li.ru/572/3900572_14111645.gif' width=300>")
r2="<p align=center><span style='font-size:20;color:blue'><BR>В этом окне выводится рисунок из Интернета
с заданным нами размером</span>" //строку не разрывать
myWindow.document.write(r2)
r3="<p align=center><span style='font-size:20;color:red'><BR>Посмотрите его размер при выводе непосредственно
по ссылке</span>" //строку не разрывать
myWindow.document.write(r3)
myWindow.document.write("<BR><a href='http://av.li.ru/572/3900572_14111645.gif'>открыть ссылку</a>")
}
</script>
<input type=button value="пуск" onClick="opnw5()">
Внутренний стиль CSS в новом окне В новом окне JavaScript можно использовать внутренний стиль CSS, т.е. стиль,
записанный между тэгами <style> и </style>. Однако, если пытаться это сделать в
скриптах, описанных в вышеприведенных примерах, убрав встроенный стиль (стиль в кодах
переменных), из этого ничего не получиться - стиль CSS вообще исчезает.
Для того, чтобы внутренний стиль CSS работал в новом окне, его скрипт должен
быть дополнен двумя строками:
var xow = document.getElementById("pasq").innerHTML; //xow-переменная нового окна
xow.document.write(divContent);
Эти строки создают блок div, с помощью которого можно реализовать все
возможности внутреннего стиля CSS.
После записи скрипта в body открываем блок div c идентификатором pasq.
Между тэгами <style> и </style> задаем внутренний стиль CSS для элементов,
записанных в body. С помощью этих элементов производим разнообразные изменения
в новом окне: вывод текста , вывод рисунка, изменение размера рисунка, смену
рисунков и др. Чтобы элементы не выводились в исходное (родительское окно),
в стиле задаем их скрытыми (display:none), а в скрипте делаем видимыми с помощью кода
xow.document.getElementById('id').style.display='block', где id - соответствующий идентификатор.
<script>
function SWW7() {
var xow = window.open('', 'nvd', 'width=450,height=600, left=200px');
xow.document.write("<BODY BGCOLOR='cyan'>")
var divContent = document.getElementById("pasq").innerHTML;
xow.document.write(divContent);
s2="<p align=center><span style='font-family: Monotype Corsiva;font-size:25;color:red'><BR><BR><BR>Текст, выведенный
по кодировке в скрипте</span>" //строку не разрывать
xow.document.write(s2)
tq="<BR><span style='font-family: Monotype Corsiva;font-size:15;align:left;line-height:13px;color:red'> Метод document.write
используется, в основном, для вывода текста, хотя имеет и ряд других применений (вывод изображения, создание <BR>окна и др.).
Расшифруем код: document.write. Первое слово document указывает nbsp; на объект, с которым мы</span>" //строку не разрывать
xow.document.write(tq)
tq1="<span style='font-family: Monotype Corsiva;font-size:15;line-height:13px;color:red'> имеем дело.
Это документ HTML. //строку не разпывать
Слово write - это метод, который применяетсяк документу (что-то пишу).</span>"
xow.document.write(tq1)
xow.document.write("<FORM><BR><INPUT TYPE=button VALUE='Перейти на стр. 2' ONCLICK=opener.WWRISA()></FORM>")
xow.document.getElementById('d5q').style.display='block'
xow.document.getElementById('tsq').style.display='block'
xow.document.getElementById('ts1q').style.display='block'
xow.document.getElementById('ts2q').style.display='block'
xow.document.getElementById('ts3q').style.display='block'
xow.setTimeout("document.getElementById('ris').style.display='block'",1600)
}
function WWRISA()
{
var divContent = document.getElementById("parqa").innerHTML;
var xow = window.open('', 'nvd', 'width=450,height=450, left=200px');
xow.document.write("")
xow.document.body.innerHTML=''
xow.document.write(divContent);
xow.document.getElementById('dr3').style.display='block'
xow.document.getElementById('im3').style.display='block'
xow.document.getElementById('im3a').style.display='block'
xow.document.getElementById('qq3').style.display='block'
xow.document.getElementById('tsq00').style.display='block'
xow.document.write("<FORM><INPUT TYPE=button style='position:absolute;margin-top:22px;margin-left:336px;' VALUE='здесь'
ONCLICK=opener.WWRIS()></FORM>") //строку не разрывать
}
function WWRIS()
{
var xow = window.open('', 'nvd', 'width=130,height=200, left=200px');
xow.document.body.innerHTML=''
imgr="<p align= center><BR><BR><BR><img SRC='9xWO.gif' width=320px>"
xow.document.write(imgr)
xow.ww="<img SRC='BTBu.gif' style='position:absolute;margin-top:2px;margin-left:-320' width=340 height=270>"
xow.setTimeout(" document.write(ww)",7300)
xow.setTimeout("close()",9000)
}
</script>
<body>
<div id="pasq">
<style>
#d5q{display:none;position:absolute;margin-top:20px;margin-left:160;
font-size:25;color:red;
}
#tsq{display:none;font-size:22px;color:blue}
#ts1q{display:none;line-height:13px;font-size:15px;color:f0f}
#ts2q{opacity:0.2;display:none;position:absolute;margin-top:260px;margin-left:170;width:70;z-index:10}
#ts2q:hover{opacity:1;width:300;margin-top:210px;margin-left:70;}
#ts3q{display:none;position:absolute;margin-top:310px;margin-left:110;font-size:18px;color:800080}
#ris{display:none;}
</style>
<div id='ris'>
<p><img id='ts2q' src='730.jpg'></p>
<p id="ts3q">Наведи курсор на фото </p><BR>
</div>
<p id="d5q">страница 1</p><BR><BR><BR><BR><BR><BR>
<span align=center id="tsq">Текст, выведенный по кодировке в div (body)</span>
<span align=center id="ts1q"> Свойство innerHTML относят к свойствам контейнерного типа.
Его значением для любого элемента является строка, содержащая HTML-код,
заключенный между открывающим и закрывающим тегами элемента. Иначе говоря,
innerHTML содержит внутренний HTML-код контейнера элемента. </span> //строку не разрывать
</div>
<div id="parqa">
<style>
#knop0{display:none;}
#tsq00{display:none;font-size:22px;color:blue;position:absolute;margin-top:73px;margin-left:20px;}
.abq img{position: absolute;
width:300px;
height:200px;}
.bbq img{opacity:0;position: absolute;}
#dr3{display:none;font-size:25px;color:blue;position:absolute;margin-top:-320px;margin-left:160;}
#qq3{display:none;font-size:22px;color:red;position:absolute;margin-top:-32px;margin-left:160;}
#im3{display:none;width:300px;height:200px;margin-left:70;}
#im3a{display:none;width:300px;height:200px;margin-left:70;}
</style>
<BR><BR><BR><BR><BR><BR><BR><BR><p><div class="abq" onclick="this.className = (this.className == 'abq' ? 'bbq': 'abq')"><img id='im3'
src='760.jpg'></div><img id='im3a' src='735.jpg'></p> //строку не разрывать
<p id="dr3">страница 3</p>
<p id='qq3'><BR>Кликни по фото, <BR>потом еще раз</p>
<p id="tsq00" align=center>Если хотите посмеяться, кликните </p><BR>
<input type=button id='knop0' value="сюда" style='position:absolute;margin-top:-10px' onClick='WWRIS()'><BR>
</div><BR>
<input type=button value="смотреть" style='position:absolute;margin-top:100px' onClick="SWW7()"></div>
Наведи курсор на фото
страница 1
Текст, выведенный по кодировке в div (body) Свойство innerHTML относят к свойствам контейнерного типа.
Его значением для любого элемента является строка, содержащая HTML-код,
заключенный между открывающим и закрывающим тегами элемента. Иначе говоря,
innerHTML содержит внутренний HTML-код контейнера элемента.
страница 3
Кликни по фото, потом еще раз
Если хотите посмеяться, кликните
Открываем новое окно CSS из нового окна JavaScript
Принцип создания таблицы
Теперь рассмотрим, как организовать код, чтобы нужный нам текст попадал в таблицу.Для этого мы
должны записать коды трех элементов: таблицы, ячейки и ее содержимого (текст). Код таблицы: <TABLE BORDER=3>Код открытия ячейки с текстом:
<tr><td><FONT FACE="Arial" size=6 color="#ff0000">здесь располагаем выводимый текст<
Закрывающие теги:</td></tr></table>записываем в коде выводимой переменной
Все коды этих элементов сводим воедино путем сложения. Полученная сумма образует
переменную вывода st1:
st1=<TABLE BORDER=3>+"<tr><td FONT FACE="Arial" size=6 color="#ff0000">здесь располагаем
выводимый текст>"+"</td></tr></table>"
Как видно, даже для таблицы с одной ячейкой код переменной вывода оказывается длинным и
громоздким.
Для облегчения запишем этот код более коротко,предварительно превратив
отдельные элементы в переменные:
st="<table border=3>"
sj="<tr><td>"
s="<span><FONT FACE="Arial" size=6 color="#ff0000">здесь располагаем выводимый текст</span>"
Тогда переменная вывода st1 собирается как бы из отдельных блоков, а потому присоединение
элементов осуществляется с помощью знака плюс:
st1=st+sj+s
Кратко принципы вывода в таблицу с одной ячейкой
даются следующей иллюстрацией Если в таблице несколько ячеек, например шесть, скрипт будет такой (коды шрифтов и цветового
оформления опущены):
<script>>
function WW() {
st="<TR><P align = center><table border=3; bordercolor='#ff0000' width=800 ></p>"
sj1="<TD>"
s1="<p align=center><TD>Первая ячейка</p>"
sj2="<TD>"
s2="<p align=center><TD>Вторая ячейка</p>"
sj3="<TD>"
s3="<p align=center><TR><TD>Третья ячейка</p>"
sj4="<TD>"
s4="<p align=center><TD>Четвертая ячейка</p>"
sj5="<TR><TD>"
s5="<p align=center>рисунок></p>"
sj6="<TD>"
s6="<p align=center><рисунок></p></table>"
st2=st+sj1+s1+sj2+s2+sj3+s3+sj4+s4+sj5+s5+sj6+s6
document.write(st2)
}
WW()
</script>
вот как это выглядит
Таблица с несколькими ячейками
Если требуется таблица с цифровым наполнением, то ее легко создать,
используя операторы циклов, а заполнить с помощью задания массива. Впрочем и в этом
случае в нее можно поместить картинки. Скрипт в этом случае состоит из трех
одинаковых блоков (по числу строк таблицы). Далее будет продемонстрирован пример
создания страницы из трех строк и пяти столбцов. Приведем часть скрипта этого
примера, который описывает первый блок. В нем задается массив цифр и коды построения
первой строки таблицы.
var m=["1","2","3","4","5"]
document.write ('<p align=center><table width=784 border=1 bordercolor=red bgcolor=ccffcc>');
for (i=0; i<5; i++)
document.write("<td><p align=center>"+m[i]+"</td>");
document.write ("</td></table> ");
Во втором блоке ячейки таблицы заполняются картинками.
a= new Array; massive_length=5
a[0]="<p align=center><img SRC='112.jpg' width=150 height=100></p>"
Далее идут коды еще четырех элементов массива, почти тождественных записанному, единственное
различие - адрес картинки. И заканчивается блок аналогично первому
document.write ('<table border=1 bordercolor=red bgcolor=ccffcc>');
for (i=0; i<5; i++)
document.write("<td>"+a[i]+"</td>");
document.write ("</td></table> ");
посмотреть
Динамическое изменение содержимого ячейки>
Можно "вытащить" число из ячейки и производить с ним действия. Для этого в коде ячейки
записывают идентификатор (id = 'val'):
sj6="<td align = center bgcolor=#ccffcc id = 'val'>"
Эта цифра (в нижеприведенном примере это цифра во второй ячейке) преобразуется в переменную
ss=Number(val.innerHTML) +1
и с помощью функции, содержащей setInterval, наращивается на единицу.
Вот как это делается В окне примера содержится отсылка к скрипту в целом.
Изменение цифры в ячейке с помощью идентификатора, вставленного в ячейку,
не дают возможности влиять на цвет и размер шрифта. Это возможно, если таблица создается
с помощью
свойства innerHTML. В этом случае предоставляется широкий спектр всевозможных изменений
во всех
ячейках таблицы, что особенно полезно для динамического сценария. В этом можно убедится
посмотрев соответствующий пример.
document.write и CSS
Метод document.write - самый быстрый метод вывода. Это объясняется тем, что
он срабатывает до того, как вся страница документа загрузилась. Точнее говоря, сразу после тега
<script>, внутри которого он расположен. Соответственно, внутренний стиль CSS загружается позже
и для вывода document.write не срабатывает. Этим объясняется, что при наличии в скрипте внутреннего
стиля CSS (между тегами <style> и </style>) document.write иногда на него не реагирует.
Про CSS .
Использование CSS в document.write напрямую
Метод document.write воспринимает внутренний стиль в двух случаях.Во-первых,
если document.write находится в скрипте вне функции, во-вторых, если он
находится внутри функции, но обработчик функции находится также в самом скрипте.
Но если функция запускается обработчиком вне скрипта, например, кнопкой, document.write
на внутренний стиль не реагирует. В этом случае document.write выведет текст
без стиля (мелким шрифтом без цвета). Чтобы содержимое вывода document.write имело
определенный цвет и размер, используют другой стиль, который называется встроенным.
Последний задается в самом коде вывода document.write и жестко связывается с ним.
Чтобы проиллюстрировать сказанное, рассмотрим вывод с помощью document.write
слова tekst, расположенного в разных частях скрипта: вне функции (tekst-0);
внутри функции, но обработчик функции находится также в самом скрипте (tekst-1);
в функции запускаемой обработчиком вне скрипта (tekst-2), и в той же функции, но
со стилем, заданным в коде самого вывода document.write (tekst-3). Скрипт выглядит так
<style> #tt { text-align:center;font-size:30px;color:red;font-weight:bold; }
</style>
<script> document.write("<span id='tt'>text-0</span>")
function VV() { document.write("<span id='tt'>text-1</span>") } VV()
function WW() { document.write("<span id='tt'>text-2</span>")
document.write("<span style='font-size:30px; color:red;'>text-3</span>")
<* Между <span и </span> строку НЕ разрывать*>
} </script>
<body> <input type="button" value="write" onClick="WW()">
Результаты вывода будут выглядить так. После загрузки документа:
После нажатия кнопки write:
Таким образом, как и было указано выше, document.write выводит текст согласно
внутреннему стилю, если document.write находится в скрипте вне функции или
если он находится внутри функции, но обработчик функции находится также в
самом скрипте. В добавок, document.write реагирует на стиль, заданный
непосредственно в коде вывода document.write (встренный стиль).
Использование CSS в document.write без ограничений
Чтобы не задумываться о вышеуказанных ограничениях и сделать применение внутреннего стиля CSS
в document.write универсальным, можно использовать следующий способ.
В скрипте первыми двумя кодами поставим
var Content = document.getElementById("pakt").innerHTML;
document.write(Content)
Тогда внутренний стиль CSS (между тегами <style> и </style>) c помощью соответствующих
идентификаторов будет задавать стиль кодов document.write, записанных в скрипте.
Поскольку document.write выводит в окно с неизвестным адресом, возникает ряд проблем
(точный возврат к исходному документу, уничтожение указанного окна и др.). Чтобы не
заморачиваться этими проблемами, удобно делать вывод методом document.write в
новое окно. Для этого в кодировке нужно сделать минимальные изменения: 1) добавить код
открытия нового окна и 2) перед кодами, начинающимися с document.write, поставить имя
переменной (xow), с помощью которой открывается новое окно.
Скрипт примера
<script>
function SWN()
{
var Content = document.getElementById("pakt").innerHTML;
var xow = window.open('', '', 'width=600,height=550, left=200px,top=50px');
xow.document.write(Content)
xow.document.write("<BODY BGCOLOR='#00fb95'>")
s1="<p id='text0'>Использование внутреннего стиля CSS <BR> в document.write </p>"
xow.document.write(s1)
s2="<p id='text'>Текст, выведенный по кодировке в скрипте</p>"
xow.document.write(s2)
s3="<p id='text1'>Рисунок, выведенный по кодировке в скрипте</span>"
xow.document.write(s3)
xow.document.write("<img id='ris' SRC='18.jpg'>")
xow.document.getElementById('inpn').style.display='block'
xow.document.getElementById('ddn').style.display='block'
}
</script>
<div id="pakt">
<div id="ddn">
<style>
#ddn{display:none;width:540px;height:400px;border:6px solid blue;margin-top:10px;margin-left:20px;position:absolute;
background-color:#cadadd}
#inpn{display:none;margin-top:480px;margin-left:20px;position:absolute;}
#text0{line-height:30px;margin-top:30px;margin-left:50px;position:absolute;font-family:Gabriola;font-size:35;color:a020f0;
font-weight:bold}
#text{margin-top:100px;margin-left:50px;position:absolute;font-family: Monotype Corsiva;font-size:29;color:green}
#text1{margin-top:160px;margin-left:50px;position:absolute;font-family: Arial;font-size:22;color:f0f}
#ris{margin-top:50px;margin-left:-350px;position:absolute;width:225;height:150;border:6px solid red;}
</style>
<input id='inpn' type="button" value=К_ТЕКСТУ onClick="window.close()">
</div></div>
<input type="button" value="Смотреть" onClick="SWN()">
document.write в новом окне CSS
Можно ли в окно, созданное средствами CSS, выводить текст и изображения с помощью
document.write? Да, при этом имеется возможность использовать
использовать внутренний стиль (между тэгами <style> и </style>). Посмотреть
<style>
#wind {display: none;
left: 300px;
width: 400px;
height: 480px;
position: relative;
padding: 1.5em;
background-color: cyan;
border: 8px solid red;
border-radius: 30px;
margin-top: 75px; margin-left:150px;
}
</style>
<body>
<a href="#" onclick="document.getElementById('wind').style.display='block';
return false;" title="Всплывающее окно">Открыть окно</a>
<div id="wind">
<button type="button" value="закрыть"
onclick="document.getElementById('wind').style.display='none';
return false;">
закрыть</button>
<script>
function WG()
{
setTimeout("document.getElementById('ris').style.display='none'",4000)
setTimeout("document.getElementById('tt').style.display='none'",4300)
setTimeout("document.getElementById('tt1').style.display='block'",4500)
setTimeout("document.getElementById('ris18').style.display='block'",4500)
br=" "
b="<p id='ris'>img SRC='531.jpg' width=300 height=200 ></p>"
a="<p id='tt' align=center><span style='font-size:18;color:blue'>Вывод по document.write в окне CSS </span>"
document.write(br+a+b)
b1="<p id='ris18' style='display:none;'><img SRC='18.jpg' width=300
height=200 ></p>"
a1="<p id='tt1' align=center><span style='font-size:18;color:blue'>Второй вывод по document.write в окне CSS</span>"
document.write(br+a1+b1)
}
WG()
</script>>
</div>>
</body>
Оглавление (простые скрипты для основных приложений JavaScript)
