Для доступа к элементам страницы чаще всего используют идентификаторы элементов - атрибут "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>
Получив доступ к элементу мы можем изменять у элемента:
- содержимое,
- стиль,
- положение,