Отправляет 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
31


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


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

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

Статистика

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

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


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

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

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

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

 

 

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

Как работать с CSS (каскадными таблицами стилей) "вручную" вы может почитать в цикле уроков уроки CSS и уроки CSS (платный раздел). А сейчас мы будет разбирать, как работать с каскадными таблица через JaveScript. Для этого можно обращаться к свойству style. Кстати, на прошлом уроке мы уже это делали, когда создавали динамическую форму.

Итак, рассмотрим пример:

<html>

    <head>

        <meta charset="UTF-8">

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

        <STYLE type="text/css">

            div

            {

                background-color:black;

                color:white;

                with:200px;

                text-align:center;

            }

        </STYLE>

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

            function over(elem)

            {

                elem.style.backgroundColor='red';

            }

           

            function out(elem)

            {

                elem.style.backgroundColor='';

            }             

        </SCRIPT>

    </head>

    <body>

        <div OnMouseOver="over(this)" OnMouseOut="out(this)">

            Некий текст

        </div>

    </body>

</html>

 

Данная программа отобразит надпись, при наведении на которую мышкой она становится красная:

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

 

Имена большинства полей в style совпадает с их аналогами в CSS, но бывает, когда в именах CSS есть символ "-", а он не допустим для идентификаторов JavaScript. Поэтому он опускается а следующая буква после нее - заглавная. Именно таким образом background-color преобразовывается в backgroundColor. Стоить заметить, что если свойства стиля заданы через тэги LINK или STYLE, в свойстве style они будут иметь пустые значения. Присвоение полю пустого значение означает что они будут браться из значений, заданных тегом LINK или STYLE. Другое дело, как узнать, а какое же значение свойства задано. Это уже зависит от используемого браузера.  Например, Internet Explorer это можно сделать через свойство currentStyle, в браузреах Mozilla и Opera - метод getComputedStyle объекта windows. На следующем уроке я вам это продемонстрирую. 

Кстати, насчет браузера. Очень часто бывает, что один и тот же скрипт в одних браузерах работает, а в других  - нет. поэтому надо проверять в разных браузерах. Например, данный скрипт работает в браузере Microsoft Edge, Internet Explorer, Chrome. 

 

 
В избранное