Программирование - это просто
Advertisement
Главная arrow C#, Delphi, VB, F#, Web и пр. arrow Web-программирование arrow Уроки Java Script arrow WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение".
16.06.2019 г.
Главное меню
Главная
Системный подход
Интернет магазин
Биржевые роботы
Программные продукты
Математика и информатика
1С:Предприятие
C#, Delphi, VB, F#, Web и пр.
Искусственный интеллект
Услуги
Ча. Во. (FAQ)
Платный раздел
Наука для чайников
Разное
Размышления
Карта сайта
Друзья сайта
Excel-это не сложно
Все о финансах
WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение". Печать E-mail
Автор megabax   
01.06.2019 г.
Урок 13. Управление шрифтами в CSS New Page 1

WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение".

 

 

На прошлом уроке мы научились средствами JS обращаться к CSS полям объектов, меня их стили оформления. Сегодня пойдем немножко дальше и научимся использовать информация об изначальных стилях.

Рассмотрим пример:

 

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 132. Java Script (JS): Определение текущего стиля форматирования</title>   

        <STYLE type="text/css">

            div

            {

                background-image:url(1.png);

            }

        </STYLE>

        <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

            function onclick_event(elem)

            {

                var curr_style=(elem.currentStyle) ? elem.currentStyle : getComputedStyle(elem,'');             

                var back=curr_style.backgroundImage;

                var num=parseInt(back.slice(back.indexOf('.')-1));

                num++;

                if(num>=5) num=1;      

                elem.style.backgroundImage='url('+num+'.png)';

            }

                           

        </SCRIPT>

    </head>

    <body>

        <div OnClick="onclick_event(this)">

            Некий текст

        </div>

    </body>

</html>

 

В данной про грамма по клику мышкой меняется фоновая картинка:

WEB-программирование: "Java Script(JS): Работа с CSS. Продолжение".

 

Как эта программа работает? Сначала мы читаем текущий стиль, "жестко заданный" в CSS:

 

var curr_style=(elem.currentStyle) ? elem.currentStyle : getComputedStyle(elem,''); 

 

Затем извлекаем путь к фоновой картинке:

var back=curr_style.backgroundImage;

 

Из его извлекаем номер файла, меняем его и устанавливаем в качестве нового фонового рисунка:

 

                var num=parseInt(back.slice(back.indexOf('.')-1));

                num++;

                if(num>=5) num=1;      

                elem.style.backgroundImage='url('+num+'.png)';

  

 

Последнее обновление ( 01.06.2019 г. )
 
Пред. »
 
© 2019 Программирование - это просто
Joomla! - свободное программное обеспечение, распространяемое по лицензии GNU/GPL.
Русская локализация © 2005-2008 Joom.Ru - Русский Дом Joomla!
Design by Mamboteam.com | Powered by Mambobanner.de
Я принимаю Яндекс.Деньги
Мы принимаем
Банковские карты
Оплатите покупку в интернет-магазине банковскими картами VISA и Mastercard любого банка.
узнать больше
Электронный кошелек
Моментальная оплата покупок с помощью вашего электронного кошелька RBK Money.
узнать больше
Банковский платеж
Оплатите покупку в любом российском банке. Срок зачисления средств на счет - 3-5 рабочих дней.
узнать больше
Денежные переводы
Оплата покупок через крупнейшие системы денежных переводов CONTACT и Unistream.
узнать больше
Почтовые переводы
Оплатите покупку в любом отделении Почты России. Срок зачисления платежа - 3-4 рабочих дня.
узнать больше
Платежные терминалы
Оплата покупок в терминалах крупнейших платежных систем в любом городе России - быстро и без комиссии.
узнать больше