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 с нуля до гуру.
Курс предназначен для начинающих и тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей. Изучив его, Вы сможете создавать более красивые и функциональные сайты. 104 видеоурока: от основ JavaScript до готовых решений на jQuery.
Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

2 комментария на «Javascript стили»

  1. stariс говорит:

    Спасибо.

  2. Анастасия говорит:

    Добрый день. Нужно убрать знак < перед function и перед var в последнем примере.
    P.S. Спасибо Вам за Ваш сайт! Легко усваивается новая информация.

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

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