Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
или
-- Купить пыльцу высшего качества --

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('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>

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

16

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

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

5 комментариев на «Javascript стили»

  1. Лунтик говорит:

    Спасибо, все понятно разложено, как по полочкам. Вся последовательность описана чётко, не то что другие (метод *** даёт объекту… — вообще не понятно новичку, откуда они все это берут). Ваши уроки дали мне ясность принципа работы языка

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

    Спасибо, что заметили опечатку. И предупредили.

  3. Сергей С-х говорит:

    Добрый день. Вот в этом выражении:
    var properti = document.getElementsByTagName(‘h1’)[0];
    в последнем примере, должен быть h2
    -исходя из условий задачи

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

    Спасибо.

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

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

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

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