Доступ к элементу страницы по идентификатору

Для доступа к элементам страницы чаще всего используют идентификаторы элементов - атрибут "id". Поместим на страницу картинку с названием (id) "pict1": < img src= “c:\windows\greenstone.bmp” id="pict1">...</ img >

Доступ к этому элементу из JavaSctipt выполняется так, как будто "pict1"- это переменная объектного типа данных, объявленная в тексте сценария:

< img src= “file:///C|/windows/greenstone.bmp” id="pict1">...</ img >

< script type="text/javascript">

pict1.style.width="100"; //изменить размер картинки

</ script >

Этот способ бесполезен в случаях, когда идентификатор элемента не известен заранее, а является результатом некоторых вычислений. В этом случае используют метод объекта document.getElementById(id).

Задача:

В четырех последовательных блоках заменить цвет текста на синий, и создать выпуклую границу блока. Зададим для блоков последовательные идентификаторы blok1, blok2, blok3, blok4 и спомощью цикла выполним задание, заменив идентификаторы универсальным “blok”+i.

<body>

<div id="blok1">Разработка интернет-приложений</div>

<div id="blok2">осуществляется </div>

<div id="blok3">средствами специализированных</div>

<div id="blok4">языков программирования</div>

<script type="text/javascript">

for (i=1; i<5; i++){

document.getElementById("blok"+i).style.color="blue";// поменять цвет текста на красный

document.getElementById("blok"+i).style.border="ridge"; //создать выпуклую границу блока

</script>

</body>

Получив доступ к элементу мы можем изменять у элемента:

  • содержимое,
  • стиль,
  • положение,

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:  



double arrow
Сейчас читают про: