 |
что такое innerHTML |
|
|
Содержание: Идентификатор Как работает innerHTML Что может innerHTML перейти↓ Как вывести текст с помощью innerHTML перейти↓ Как вывести строковую переменную перейти↓ Как вывести числовую переменную перейти↓ Как вывести картинку помощью innerHTML перейти↓ Как скрыть картинку помощью innerHTML перейти↓ Как записать идентификатор в коде вывода innerHTML перейти↓ Совместный вывод картинки и текста с помощью innerHTML перейти↓ Как сделать обтекание изображения текстом перейти↓ Как сделать ячейку с рамкой и менять их цвет перейти↓ Как вывести информацию в таблицу с помощью innerHTML перейти↓ Использование innerHTML в динамическом сценарии перейти↓ innerHTML и outerHTML перейти↓ Форматирование и стили перейти↓ innerHTML в новом окне JavaScript перейти↓ innerHTML в окне, созданном CSS перейти↓ Идентификатор Свойство innerhtml - незаменимый инструмент для создания динамических сценариев. Оно позволяет производить самые разнообразные изменения в текущем окне по ходу исполнения скрипта. Свойство innerHTML относят к свойствам контейнерного типа. Его значением для любого элемента является строка, содержащая HTML-код, заключенный между открывающим и закрывающим тегами элемента. Иначе говоря, innerHTML содержит внутренний HTML-код контейнера элемента. Зачем нужен этот контейнер. Предположим, вам нужно вывести текст или картинку. Это делается с помощью определенных тэгов в теле HTML – документа. И для этого никакой скрипт не нужен. Но при этом и текст, и картинка будут жестко привязаны к текущему окну. Если вам понадобилось вывести новый текст или новую картинку, приходится с помощью скрипта открывать новое окно. Чтобы производить подобные изменения и при это не открывать нового окна, вам на помощь приходит свойство под названием innerHTML. Поскольку текст или картинку создают тэги HTML – документа, нужно из скрипта обратиться к HTML – документу. Для этого внутри HTML – документа и создается некий сундучок или, по-научному, контейнер, содержимым которого можно управлять из скрипта. Этим сундучком-контейнером является идентификатор id с определенным именем. При обращении к нему, вы переходите от скрипта к HTML – документу и можете вызвать в текущем окне то, что создается средствами языка HTML. Пока вы не обратились к id, сундучок пуст. Когда же в скрипте вы указываете имя идентификатора и добавляете определенный код, происходит две вещи. Вы наполняете сундучок определенным содержимым (и это содержимое принадлежит HTML – документу) и заставляете его с помощью браузера произвести определенные изменения в текущем окне. Обращаясь к сундучку несколько раз, вы каждый раз меняете его содержимое (причем внутри HTML – документа) и тем самым производите изменения в текущем окне. Итак, свойство innerHTML создает доступ к элементу с идентификатором id, который должен быть записан до скрипта. Например, <p id="tim"></p>. Далее мы должны закодировать действия, которые мы хотим совершить с помощью этого идентификатора. Кодировка включает два шага. Мы должны закодировать само действие, задав его с помощью строковой переменной. Например, для вывода на экран монитора текста (упростим его до одного слова "ИДЕНТИФИКАТОР") мы записываем в скрипте: s2="<идентификатор>" Второй шаг - запись кода вывода. Здесь через указания обращения к идентификатору (tim) и доступа к нему (с помощью свойства innerHTML) после знака равенства указываем переменную, которую нужно вывести на экран монитора (s2): tim.innerHTML=s2 При таком выводе получится очень мелкий текст. Чтобы влиять на шрифт и цвет текста нужно указать стиль, поместив его между тэгами <p и </p> (или между <span и </span>) s2="<p style='font-size:60;color:blue'>идентификатор</p>" В этом случае мы получим крупный шрифт синего цвета. Если мы хотим вывести другой текст (например, innerHTML), нужно повторить указанные два шага, т.е. повторить два вышеуказанных кода, произведя изменение в переменной (заменяем одно слово на другое): s2="<p> style='font-size:60;color:blue'>innerHTML</p>" tim.innerHTML=s2 Для изменения цвета текста с синего на красный в коде переменной меняет blue на red: s2="<p> style='font-size:60;color:red'>innerHTML</p>" tim.innerHTML=s2 Если мы хотим очистить экран, то используем коды: s2="<style.display='none'>" tim.innerHTML=s2 или tim.innerHTML='' tim.innerHTML=s2Что может innerHTML? Чтобы убедиться в больших возможностях innerHTML посмотрите, следующий пример. Как вывести текст с помощью innerHTML? Есть два варианта вывода. В первом варианте описание стиля входит в задание выводимой переменной: w1="<p span style='font-size:30;color:red'>Здесь пишем выводимый текст</span>" tim1.innerHTML=w1 Во втором варианте стиль указывается непосредственно в коде вывода: w2=" Здесь пишем выводимый текст" tim2.innerHTML="<span style='font-size:30;color:blue'>"+w2+"</span>" Таким образом, если стиль задается в коде переменной, то в коде вывода пишем просто имя переменной (w), а если стиль задается в коде вывода, то переменную ставим после закрывающего тэга стиля между кавычками и знаками плюс ("+w+"). Поместим эти коды в скрипт и запишем идентификаторы tim1 и tim2 перед скриптом. <p id='tim1'><p id='tim2'></p> <script> function WWT() { w1="<span style='font-size:33;color:red'>Первый вариант вывода</span>" tim1.innerHTML=w1 w2="Второй вариант вывод " tim2.innerHTML="<span style='font-size:33;color:blue'>"+w2+"</span>" } </script> <input type="button" value=кликни OnClick="WWT()"> Если кликнуть по кнопке, то получим
Повторим, чио идентификаторы tim1 и tim2 должны быть записаны перед
скриптом. ВАЖНОЕ замечание: Текст, обозначенный как переменная, в скрипте должен
быть записан в одну строку (без разрыва). Если строка длинная, ее следует разбить на две
части и каждую часть обозначить как переменную. Далее нужно ввести новую
переменную как сумму двух предыдущих и именно её указать в коде вывода.
Как вывести строковую переменную
Для вывода строковой переменной сначала нужно задать ее содержимое кодом
w0="<span style='font-size:40;color:#ff00ff'><p align=center>строковая переменная</span>"
Главное в этом коде - это то, что записано между тэгами >.....<. Это и есть
то содержимое, которое вы хотите увидеть на экране (остальное относится к дизайну вывода).
Здесь возможны два варианта. Либо вы пишите сам текст, тогда
он будет выведен как точная копия записи. Либо этот текст (если он длинный) можно
записать как строковую переменную.
q="строковая переменная"
и вставить q между тэгами >.....<
Затем добавить код самого вывода
mam.innerHTML=w0
В целом, скрипт будет выглядит так:
<p id="mam"></p>
<script>
w0="<span style='font-size:40;color:#ff00ff'><p align=center>строковая переменная</span>"
mam.innerHTML=w0
</script>
Нажмите кнопку "пуск0", чтобы увидеть результат. Новое окно закроется автоматически. Как вывести числовую переменную Для вывода числовой переменной сначала нужно задать переменную: y=7.145 Затем обозначение переменной (y) следует поместить в код w1="<span style='font-size:40;color:#ff00ff'><p align=center>"+y+"</span>" Затем добавляется код вывода mam.innerHTML=w1 Обратите внимание, что для вывода числовой переменной ее обозначение должно быть заключено в символы "+y+". В целом, скрипт будет выглядит так: <p id="mym"></p> <script> y=7.145 w1="<span style='font-size:50;color:#ff00ff'><p align=center>"+y+"</span>" mym.innerHTML=w1 </script> Нажмите кнопку "пуск1", чтобы увидеть результат. Новое окно закроется автоматически. Как вывести картинку с помощью innerHTML Чтобы вывести изображение с помощью innerHTML, используется код: tim.innerHTML="<img SRC='18.jpg' align=left width=300 height=200>" Если вы хотите вывести две картинки одну за другой на одном и том же месте экран, нужно всего лишь повторить записанный код, изменив адрес картинки. Поскольку идентификатор не изменился, вторая картинка заместит первую. Если вы хотите, чтобы вторая картинка появилась на другом месте экрана (будут две картинки), вам следует в коде вывода второй картинки изменить имя идентификатора. Например, вызываем первую картинку с помощью идентификатора "tim", а вторую картинку - с помощью идентификатора "tam". Приведем часть скрипта <HTML> <HEAD> <TITLE>inner3i</TITLE> <p id="tim"></p> <p id="my"></p> <p id="tam"></p> <p id="tut"></p> <script> setTimeout("WW12()",100); function WW12() { w="выводим первый рисунок" my.innerHTML="<span style='font-size:40;color:red'>"+w+"</span>" tim.innerHTML="<img SRC='533.jpg' align=left width=300 height=200>"//выводим рисунок } setTimeout("WW6()",3000); function WW6() { w="выводим второй рисунок на том же месте" my.innerHTML="<span style='font-size:40;color:blue'>"+w+"</span>" tim.innerHTML="<img SRC='534.jpg' align=left width=300 height=200>"//выводим рисунок } setTimeout("WW7()",6000); function WW7() { w="выводим второй рисунок на другом месте" my.innerHTML="<p align=right><span style='font-size:40;color:ff00ff'>"+w+"</span>" tam.innerHTML="<img SRC='534.jpg' align=right width=300 height=200>"//выводим рисунок tim.innerHTML='<style.display="none">';//скрываем рисунок } setTimeout("WW14()",9000); function WW14() { tam.innerHTML='<style.display="none">';//скрываем рисунок w="выводим третий рисунок<BR> на другом месте" my.innerHTML="<p align=centergt<span style='font-size:40;color:red'>"+w+"</span>" tut.innerHTML="<p align=center><img SRC='151.jpg' width=300 height=200>"//выводим рисунок } </script>/FONT> Как скрыть картинку В последнем скрипте присутствуют коды скрытия картинки, необходимые, чтобы новая картинка появилась на новом месте. Простейший код скрытия для innerHTML таков: id.innerHTML="" Как записать идентификатор в коде вывода innerHTML При выводе текста изображения и других объектов часто в коде вывода требуется указать идентификатор. Например, для задания внутреннего стиля выводимого текста, используем код r="Выводим текст и крисунок с идентификаторами a и d" dam.innerHTML="<p id='a'>"+r+"</p>" При выводе изображения: dim.innerHTML="<img id='d' SRC='18.jpg' >" Ниже приводится скрипт, в котором с помощью идентификаторов a и b задается стиль текста, а с помощью идентификаторов d и f стиль изображения. Они же позволяют изменять стиль по ходу исполнения скрипта. Меняют цвет шрифта, размер и позиционирование картинок, создают рамку изображения. Приведем весь скрипт вывода с помощью innerHTML при использовании идентификаторов. <style> #a{position: absolute;margin-top: 90px; margin-left: 200px; font-size:35;color:red} #b{position: absolute;margin-top: 50px; margin-left: 200px; font-size:35;color:blue} #d{position: absolute;margin-top: 200px; margin-left: 30px;width:300; height:200;} #f{position: absolute;margin-top: 150px; margin-left: 550px;width:150; height:100; border: 8px solid red;z-index:10} </style> <p id="ita">p<p id="tum"><p id="dum"><p id="dom"></p> <script> r="Выводим текст и крисунок с идентификаторами a и d" dum.innerHTML="<p id='a'>"+r+"</p>" dom.innerHTML="<img id='d' SRC='18.jpg'>" setTimeout("WW0()",3500); function WW0() { dum.innerHTML='<style.display="none">';//скрываем текст dom.innerHTML='<style.display="none">';//скрываем рисунок } setTimeout("WW1()",4000); function WW1() { aw="Выводим текст и крисунок с идентификаторами b и f" ita.innerHTML="<span id='b'>"+aw+"</span>" tum.innerHTML="<img id='f' SRC='18.jpg'>" } setTimeout("WW3()",7000); function WW3() { tum.innerHTML='<style.display="none">';//скрываем рисунок ita.innerHTML='<style.display="none">';//скрываем текст } setTimeout("WW4()",8000); function WW4() { rk="КОНЕЦ" dum.innerHTML="<p id='a'>"+rk+"</p>" } </script> Совместный вывод картинки и текста Если картинку необходимо сопроводить пояснительным текстом, то ее вывод вышеописанным способом может вызвать некоторые затруднения.Если вывод производится по ОДНОЙ переменной, то в скрипте идентификаторы должны быть записаны в том же порядке, в каком они перечислены перед скриптом. Например,если до скрипта было записано <p id="tim"></p> <p id="myt"></p> то и в скрипте идентификаторы должны быть перечислены в таком же порядке: tim.innerHTML="<img SRC='150.jpg' align=left width=300 height=200>"//выводим рисунок w="Подпись ПОД рисунком" myt.innerHTML="<p align=left><span style='font-size:25;color:blue'>"+w+"</span>"//выводим текст Если же в верхней строке использовать myt, а в нижней tim, то подпись окажется выше рисунка. Удобнее осуществлять вывод с помощью суммарной переменной (при этом потребуется только один идентификатор) tim="<p align=center><img SRC='150.jpg' width=300 height=200></p>" myt="<p align=center><font size=5; color=blue>Подпись ПОД рисунком</p>" w=tim+myt ita.innerHTML="<p align=center>"+w+"</p>" При этом последовательность вывода отдельных переменных определяется последовательностью их перечисления в суммарной переменной. Посмотрите на иллюстрацию сказанного. Как сделать обтекание изображения текстом. Чтобы заставить текст обтекать картинку,можно использовать следующий простой способ. Картинки и текст нужно поместить в ячейки таблицы. Посмотрите Текст и изображения помещаются в ячейки таблицы, рамки которой на мониторе не видны. Вывод в таблицу подробно рассмотрен чуть ниже. С помощью переменной х и функции WW() задается движение во времени. Приведем начальную часть скрипта (полный скрипт смотри по ссылке). <HTML> <HEAD> <TITLE>inner3i-2</TITLE> </HEAD> <p id="mim"></p> <p id="tim"></p> <p id="tam"></p> <script> var x=0; setInterval('WW()',100) function WW(){ x++; sj="<TD>" s1="<p><img SRC='532.jpg' width=300 height=180 " st="<TABLE>" st2=st+sj+s1 mim.innerHTML="<p>"+st2+"</p>" if (x>15) { s2="<font size=6; color=ff0000><p align=center>ОБТЕКАНИЕ СПРАВА.<BR><font size=5>Здесь может быть размещен текст." st2=st+sj+s1+sj+s2 mim.innerHTML="<p>"+st2+"</p>" } if (x>35) { s1="<p><img SRC='612.jpg' width=300 height=180 " st2=st+sj+s1 tim.innerHTML="<p>"+st2+"</p>" } С помощью innerHTML можно выводить блоки информации один за другим, без открытия нового окна. Проще всего это можно сделать, используя при выводе один единственный идентификатор. При необходимости скрытия блока (исчезновения с монитора) используем код: tim.innerHTML='<style.display="none">' Посмотрите как выводятся один за другим три блока информации. При этом скрипт аналогичен вышеприведенному, только выводы осуществляются одним и тем же идентификатором. Как сделать ячейку с рамкой и менять их цвет Еще с помощью свойства innerHTML можно создать ячейку с рамкой и менять их цвет. Для этого используется скрипт: <script> st="<table width=100 height=100>"//создаем таблицу sj="<TD bgcolor=ff00ff>"//создаем ячейку без рамки s4=st+sj //объединяем переменные mim.innerHTML=s4 //выводим переменную } if (x>15) { st="<table border=8 width=100 height=100>"//создаем ячейку с рамкой sj="<TD bgcolor=ff00ff>" s4=st+sj mim.innerHTML=s4 } if (x>30) { st="<table border=8 bordercolor=0000ff width=100 height=100>"//меняем цвет рамки sj="<TD bgcolor=ff00ff>" s4=st+sj mim.innerHTML=s4 } if (x>50) { st="<table border=8 bordercolor=ff0000 width=100 height=100>" sj="<TD bgcolor=ff00ff>"//меняем цвет фона ячейки s4=st+sj mim.innerHTML=s4 } if (x>70) { st="<table border=8 bordercolor=ff0000 width=100 height=100>" sj="<TD bgcolor=0000ff>" s4=st+sj mim.innerHTML=s4 } if (x>90) { mim.innerHTML="<style.display='none'>" } } </script> Посмотрите, как работает этот скрипт. Более подробно о работе с цветом можно посмотреть здесь Как вывести информацию в таблицу С помощью свойства innerHTML можно создать сценарий, по которому текст и картинки будут выводится в таблицу. При этом содержимое ячеек таблицы можно заставить меняться по ходу выполнения сценария.Посмотрите как это делается. Отсылка к скрипту содержится в самом примере. Если используется только одна ячейка таблицы, можно создать эффектную рамку для текста или картинки. Подробнее создание таблицы с помощью innerHTML рассмотрены Здесь, а принципы создания таблицы внутри скрипта рассмотрены Здесь. В последнем случае вывод осуществляется с помощью метода write. Однако следует иметь в виду,что коды вывода mim.innerHTML="+st2+" document.write(st2) дают одинаковый результат. Здесь st2 - выводимая переменная, которая может быть суммой нескольких переменных. Использование innerHTML в динамическом сценарии. Особенно полезен innerHTML при создании динамических сценариев, в которых по ходу исполнения скрипта могут появляться и исчезать текст и картинки, выводится цифры и многое другое. Посмотрите на работу такого сценария. Скрипт этого сценария таков. <HTML> <HEAD> <TITLE>inner4</TITLE> <p id="tim"></p> <p id="my"></p><p id="myt"></p> <p id="tam"></p> <p id="tuta"></p> <script language="JavaScript"> var x=0; setInterval('WW()',100) function WW(){ x++; w=x my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//выводим цифры if (x>10) { w="выводим ТЕКСТ" my.innerHTML="<span style='font-size:60;color:blue'>"+w+"</span>"//выводим текст } if (x>25) { w="меняем цвет ТЕКСТА" my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//меняем цвет текста } if (x>30) { w="меняем цвет ТЕКСТА" my.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>"//меняем цвет текста a="<span style='font-size:50;color:blue'> на пару секунд он сейчас исчезнет</span>" myt.innerHTML=a } if (x>50) { my.innerHTML='<style.display="none">';//скрываем текст myt.innerHTML='<style.display="none">';//скрываем текст } if (x>70) { w="восстанавливаем цифры" my.innerHTML="<p align=center><span style='font-size:60;color:red'>"+w+"</span>" //восстанавливаем текст } if (x>80) { my.innerHTML="<p align=center><span style='font-size:60;color:red'>"+x+"</span>" //выводим цифры } if (x>100) { w="выводим рисунок" my.innerHTML="<span style='font-size:40;color:red'>"+w+"</span>" tim.innerHTML="<img SRC='14.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>140) { w="заменяем рисунок" my.innerHTML="<span style='font-size:40;color:blue'>"+w+"</span>" tim.innerHTML="<img SRC='18.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>160) { w="выводим еще раз рисунок" my.innerHTML="<span style='font-size:40;color:brown'>"+w+"<</span>" tim.innerHTML="<img SRC='532.jpg' align=left width=300 height=200>"//выводим рисунок } if (x>190) { my.innerHTML='<style.display="none">';//скрываем текст tim.innerHTML='<style.display="none">';//скрываем рисунок r="КОНЕЦ" tam.innerHTML="<span style='font-size:80;color:red'>"+r+"</span>" s="СЦЕНАРИЯ" tuta.innerHTML="<span style='font-size:80;color:red'>"+s+"</span>" } } WW() --> </Script> </head> <body bgcolor="00ff00"> </body> </html> Необходимые пояснения содержатся в самом скрипте. Добавим, что время задается переменной х с помощью задержки функции WW() в одну децисекунду. Следует отметить, что, если текст или картинка выводятся несколько раз при использовании одного и того же идентификатора, то происходит замещение объекта на одном и том же месте экрана. Чтобы они появлялись на новом месте, необходимо прибегать к новым именам идентификатора. Следует также иметь в виду, что, наряду со свойством nnerHTML, имеется свойство outerHTML, аналогичное свойству innerHTML, но отличающееся тем, что содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента. Посмотрите пример, показывающий различие между innerHTML и outerHTML. В этом примере идентификатор записан в блоке div: <div id="ttt"> <p id="rrr"></p> </div> Методом alert производится вывод сначала с помощью innerHTML, а затем с помощью outerHTML. Кодировка вывода: alert(document.all.ttt.innerHTML) alert( document.all.ttt.outerHTML) Свойство outerHTML, также, как и innerHTML, можно использовать для вывода текста и изображения. Следует иметь в виду, что в скрипте, использующем скрытие (исчезновение с экрана монитора) текста или изображения, смешивание innerHTML и outerHTML (вывод по innerHTML, а скрытие по outerHTML) может привести к сбою сценария. Посмотрите, как это происходит. А теперь скрипт. <HTML> <HEAD> <TITLE>inner2</TITLE> </HEAD> <p id="tim"></p> <p id="amy"></p><p id="tum"></p> < id="tam"></p><p < id="tym"></p><p < id="met"> <script> var x=0; setInterval('WW()',100) function WW(){ x++; setInterval('WW()',100) function WW(){ x++; r1="<p align=center><span style='font-size:80;color:blue'>НАЧИНАЕМ</span>" st="<TABLE BORDER=5; bgColor=f0ffff ; borderColor=ff0000 WIDTH=450 height=300>" st2=st+"<TR><TD>"+r1+"</table>" tim.innerHTML="<p align=center>"+st2+"</p>" if (x>15) { tim.innerHTML='<style.display="none">' w="выводим рисунок" amy.innerHTML="<span style='font-size:60;color:brown'>"+w+"</span>" s1="<p align=center><img SRC='530.jpg' width=550 height=350 ></p>" st="<TABLE BORDER=5; bgColor=#f0ffff ; borderColor=0000ff WIDTH=450 height=300>" st2=st+"<TR><TD>"+s1+"</table>" tim.innerHTML="<p align=center>"+st2+"</p>"//выводим рис } if (x>35) { amy.innerHTML='<style.display="none">';//скрываем текст tim.innerHTML='<style.display="none">';//скрываем текст r="продолжаем" tam.innerHTML="<p align=center><span style='font-size:80;color:red'>"+r+"</span>" } if (x>45) { tam.innerHTML='<style.display="none">' w="выводим еще один рисунок" tum.innerHTML="<span style='font-size:60;color:red'>"+w+"</span>" tym.innerHTML="<p align=center><img SRC='03.jpg' width=450 height=300>"//выводим рисунок } if (x>75) { tum.innerHTML='<style.display="none">';//скрываем текст tym.innerHTML='<style.display="none">';//скрываем рисунок r="<p align=center><pspan style='font-size:60;color:blue'<pПАУЗА - ЖДИТЕ</span>" st="<TABLE BORDER=5; bgColor=#f0ffff ; borderColor=ff0000 WIDTH=450 height=300>" st2=st+"<TR><TD>"+r+"</table>" met.innerHTML="<p align=center>"+st2+"</p>" } if (x>95) { tim.innerHTML='<style.display="none">' } if (x>100) { met.innerHTML='<style.display="none">' r1="<p align=center><span style='font-size:80;color:red'>КОНЕЦ</span>" st="<TABLE BORDER=5; bgColor=#f0ffff ; borderColor=0000ff WIDTH=450 height=300>" st2=st+"<TR><TD>"+r1+"</table>" tim.innerHTML=""+st2+"</p>" } if (x>105) { r2="<p align=center><span style='font-size:60;color:red'>Начинаем по второму разу</span>" st="  |