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

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

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 681 RSS
←   Ноябрь 2020   →
 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. Продолжение-2".

Сегодня мы с вами изучим объект styleSheet. Этот объект, также как и style, непосредственно связна со стилем. Хотя первый используется значительно реже, но в некоторых случаях он незаменим. Он позволяет работать со стилями, присоединенными к документу при помощи тегов <STYLE> или <LINK>. Таким образом, если style позволяет изменить форматирование только одного объекта, то styleSheet - целой группы объектов, при этом оказывается влияние на правило форматирования. 

Если к документу подключено несколько таблиц стилей, то для каждой создается отдельный объект styleSheet. Таким образом, styleSheet - это массив. Если мы подключаем только одну таблицу стилей, то обращаться к объекту следует так: styleSheet[0]. 

Основное свойство этого объекта массив Rules или cssRules в зависимости от браузера.  Каждый элемент массива представляет собой доступ к отдельному правилу. У этого отдельного правила есть два основных свойства selectorText и style. Первое служит для доступа к селекторной части правила, может использоваться как для поиска нужного правила так и для изменения самого селектора. Второй является указателем на объект, аналогичный style, который описывает форматирование по данному правилу.

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

<html>

    <head>

        <meta charset="UTF-8">

        <title>Урок 133. Java Script (JS): Свойство styleSheet</title> 

        <STYLE type="text/css">

            TD

            {

                color:red;

            }

        </STYLE>

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

            function change(color)

            {              

                var st=document.styleSheets[0];                    

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

                rule.style.backgroundColor=color;

            }                            

        </SCRIPT>

    </head>

    <body>

        <Table>

            <tr>

                <td>Один</td><td>Два</td><td>Три</td>

            </tr>

        </Table>

        <a href="javascript:change('Green')">

            Поменять цвет фона во всех ячейках

        </div>

    </body>

</html>

 

Этот пример меняет цвет фона во всех ячейках при клике на ссылку.

Было так:

 

Нажали, стало так:

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное