Очень часто нужно быстро и динамично поменять цвет текста, размер, фоновую картинку, рамку и т.д.

В принципе фактически любое правило CSS можно менять средствами JavaScript. Таких правил очень много мы рассмотрим основные...

Как подключатся к стилям через JS? - document.getElementById('ElemId').style

Теперь рассмотрим конкретный пример - мы хотим поменять цвет текста в нашем блоке. К примеру изначально в нашем блоке ElemId цвет текста белый (#ffffff), а мы хотим поменять его на черный уже когда страница загружена, вот как это выглядит:

<a href="#" onclick="document.getElementById('ElemId').style.color = '#000'; return false">Поменять цвет</a>

Точно так же можно применять это в функциях, я показал сокращенный вариант с использованием ссылки.

Вот еще несколько полезных параметров:

ElemId = document.getElementById('ElemId');

ElemId.style.display = 'block'; // показать блок. block параметр правила display

ElemId.style.display = 'none'; // скрыть блок

ElemId.style.backgroundColor = '#000000'; // поменять цвет фона. #000000 - цвет

ElemId.style.backgroundImage = 'url(simpleimg.gif)'; // поменять изображение фона. simpleimg.gif - изображение

ElemId.style.fontSize = '15px'; -  размер шрифта. 15px // Параметр значения fontSize

ElemId.style.height = '100px'; // высота блочного элемента

ElemId.style.width = '100px'; // ширина блочного элемента

Вот вроде все основные дописал... В принципе все очень понятно и несложно применять если знаешь JS и CSS

PS: ElemId - ID нашего блока или просто элемента html страницы

Добавлено: 29 Сентября 2013 04:00:16 Добавил: Андрей Ковальчук Нравится 0

Добавить