Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 RSS
←   Июнь 2019   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

681 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


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

Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Канал на яндексДзен:  Фантастика, фэнтази, научпоп, наука, философия, размышления

 

 

На прошлом уроке мы научились средствами 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)';

  

 
В избранное