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

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

Урок 13. Управление шрифтами в CSS New Page 1

 

Сегодня мы рассмотрим пример изменения стиля форматирования фона. У нас есть фоновое изображение, поверх него текст:

По клику мышки изображение меняется на зеркальное:

Вот код данной программы:

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 135. Java Script (JS): Изменение стиля форматирования фона</title> 

        <STYLE type="text/css">

            div

            {

                background-image:url(right.png);

                background-repeat:repeat-x;

                font-size:180%;

            }          

        </STYLE>

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

            function my_click()

            {                  

                var st=document.styleSheets[0];

                var rule=(st.rules) ? st.rules[0] : st.cssRules[0];            

                if(rule.style.backgroundImage=='url("right.png")')

                {

                    rule.style.backgroundImage='url(mirror.png)'

                }

                else

                {

                    rule.style.backgroundImage='url(right.png)'

                }

            }                      

        </SCRIPT>

    </head>

    <body>

        <div OnClick="my_click()">

            Текст внутри этого контейнера расположен поверх фонового изображения, которое меняется по клику мышки<br>

            Текст внутри этого контейнера расположен поверх фонового изображения, которое меняется по клику мышки<br>

        </div>

    </body>

</html>

Здесь мы при помощи CSS  стиля задаем фоновое изображение, а скриптом меняем его. 

 

С уважением, Шуравин Александр, e-mail: Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script '; document.write( '' ); document.write( addy_text28532 ); document.write( '<\/a>' ); //-->\n Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script , автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 

Последнее обновление ( 13.11.2021 г. )