Javascript стили

Здравствуйте уважаемые начинающие программисты.

В предыдущей статье мы научились получать доступ к элементам страницы.

Раз есть доступ, значит будем пользоваться, т.е воздействовать на имеющиеся элементы средствами 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>

15

В этом примере обратите внимание как в javascript записываются свойства.

Если в css многие свойства пишутся через дефис (font-size, padding-left, font-family и т.д.), то в javascript они записываются слитно, но вторая часть начинается с заглавной буквы (fontSize, paddingLeft, fontFamily).

Итак, оформление сделано, но ведь стилей обычно бывает много, и если продолжить писать их в строку, каждый раз указывая атрибут style, получится корявенько и трудночитаемо.

Есть способ сделать аккуратнее. (Дальше, чтобы сократить код, работаем только с заголовком)

Создадим функцию forma, и в ней переменную properti, в которую внесём доступ к заголовку со всеми стилями.

<script>
	<function forma()
		{
		<var properti = document.getElementsByTagName('h1')[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>

Так код гораздо читабельней.

16

Javascript доступ к элементам html < < < В раздел > > > Javascript Массив

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *