Здравствуйте уважаемые начинающие программисты.
В предыдущей статье мы научились получать доступ к элементам страницы.
Раз есть доступ, значит будем пользоваться, т.е воздействовать на имеющиеся элементы средствами javascript.
Во первых проверим, как будут откликаться элементы на наши действия.
В прошлом уроке мы остановились на том, что вывели на экран заголовок и абзац средствами Javascript.
Давайте уберём из кода вывод на экран так как он был нужен только для проверки, и будем работать с теми элементами, которые выведены тегами html.
<script>
document.getElementsByTagName('h2')[0].innerHTML;
document.getElementById('nev').innerHTML;
</script>
Попробуем из скрипта изменить текст в заголовке и абзаце. Делается это следующим образом:
<script>
document.getElementsByTagName('h2')[0].innerHTML = 'Курс Javascript';
document.getElementById('nev').innerHTML = 'Для начинающих';
</script>
Попробуйте. Изменились? У меня изменились. Теперь можно задать стилевое оформление, к чему собственно и стремились.
Заголовку зададим цвет, а абзацу размер.
<script>
document.getElementsByTagName('h2')[0].style.color = '#00AA72';
document.getElementById('nev').style.fontSize = '20px';
</script>
В этом примере обратите внимание как в javascript записываются свойства.
Если в css многие свойства пишутся через дефис (font-size, padding-left, font-family и т.д.), то в javascript они записываются слитно, но вторая часть начинается с заглавной буквы (fontSize, paddingLeft, fontFamily).
Итак, оформление сделано, но ведь стилей обычно бывает много, и если продолжить писать их в строку, каждый раз указывая атрибут style, получится корявенько и трудночитаемо.
Есть способ сделать аккуратнее. (Дальше, чтобы сократить код, работаем только с заголовком)
Создадим функцию forma, и в ней переменную properti, в которую внесём доступ к заголовку со всеми стилями.
<script>
function forma()
{
var properti = document.getElementsByTagName('h2')[0];
properti.style.color = '#00AA72';
properti.style.width = '220px';
properti.style.fontFamily = 'Impact';
properti.style.border = '1px solid #333';
properti.style.borderRadius = '10px';
properti.style.padding = '10px';
}
forma();
</script>
Так код гораздо читабельней.
Javascript доступ к элементам html < < < В раздел > > > Javascript Массив
Спасибо, все понятно разложено, как по полочкам. Вся последовательность описана чётко, не то что другие (метод *** даёт объекту… — вообще не понятно новичку, откуда они все это берут). Ваши уроки дали мне ясность принципа работы языка
Спасибо, что заметили опечатку. И предупредили.
Добрый день. Вот в этом выражении:
var properti = document.getElementsByTagName(‘h1’)[0];
в последнем примере, должен быть h2
-исходя из условий задачи
Спасибо.
Добрый день. Нужно убрать знак < перед function и перед var в последнем примере.
P.S. Спасибо Вам за Ваш сайт! Легко усваивается новая информация.