Разница между стилем css и стилем в коде html

@Firework · Регистрация: 01.04.2013

Студворк — интернет-сервис помощи студентам

Такой код

HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language = 'javascript'>
    var hT, sT;
 
    function Show(objId, x) {
        var obj = document.getElementById(objId);
        var obj = document.getElementById(objId);
        op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
        if(op < x) {
            clearTimeout(hT);
            op += 0.1;
            obj.style.opacity = op;
            obj.style.filter='alpha(opacity='+op*100+')';
            sT=setTimeout('Show(\''+objId+'\', '+x+')',100);
        }
    }
 
    function Hide(objId, x) {
        var obj = document.getElementById(objId);
        op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
        if(op > x) {
            clearTimeout(sT);
            op -= 0.1;
            obj.style.opacity = op;
            obj.style.filter='alpha(opacity='+op*100+')';
            hT=setTimeout('Hide(\''+objId+'\', '+x+')',100);
        }
    }
    
</script>
<style type='text/css'>
    /* Формируем и позиционируем всплывающее окно */
    .popup { 
        min-width: 320px;
        max-width: 400px;
        margin: auto;
        background-color: #E1E7FF;
        border: 3px solid #fff;
        display: block;
        left: 0; right: 0;
        padding: 15px;
        position: fixed;
        font-size: 14px;
        top: 25%;
        opacity: 0.1;
        filter: alpha(opacity=10);
    }   
</style> 
</head>
<body>
        
    <?php
    $pp_style = "
        min-width: 320px;
        max-width: 400px;
        margin: auto;
        background-color: #E1E7FF;
        border: 3px solid #fff;
        display: block;
        left: 0; right: 0;
        padding: 15px;
        position: fixed;
        font-size: 14px;
        top: 25%;
        opacity: 0.1;
        filter: alpha(opacity=10);
        ";
 
    print('
    <div class="popup" id="gallery_popup" style="'.$pp_style.'">
    ');         
    ?>      
        <img src = "img/button_left.png" title = "Предыдущая"/>
        <img src = "img/button_right.png" title = "Следующая"/>
    </div>
    <button onClick="Hide('gallery_popup', 0.1);">Hide</button>
    <button onClick="Show('gallery_popup', 1);">Show</button>
    
</body>
</html>

если я из строчки
<div class="popup" id="gallery_popup" style="'.$pp_style.'">
уберу style="'.$pp_style.'", т.е. останется такой же стиль CSS, то элемент div не будет скрываться и показываться при нажатии на кнопки.
Почему?

@Ukkas · 10.02.2014, 10:32

Firework, проблема в свойстве filter, которое не работает уже почти нигде http://htmlbook.ru/css/filter

@Firework · 10.02.2014, 10:37 **[ТС]**

Сообщение от Ukkas

Firework, проблема в свойстве filter, которое не работает уже почти нигде http://htmlbook.ru/css/filter

Убрал фильтры...

HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language = 'javascript'>
    var hT, sT;
 
    function Show(objId, x) {
        var obj = document.getElementById(objId);
        var obj = document.getElementById(objId);
        op = parseFloat(obj.style.opacity);
        if(op < x) {
            clearTimeout(hT);
            op += 0.1;
            obj.style.opacity = op;
            sT=setTimeout('Show(\''+objId+'\', '+x+')',100);
        }
    }
 
    function Hide(objId, x) {
        var obj = document.getElementById(objId);
        op = parseFloat(obj.style.opacity);
        if(op > x) {
            clearTimeout(sT);
            op -= 0.1;
            obj.style.opacity = op;
            hT=setTimeout('Hide(\''+objId+'\', '+x+')',100);
        }
    }
    
</script>
<style type='text/css'>
    /* Формируем и позиционируем всплывающее окно */
    .popup { 
        min-width: 320px;
        max-width: 400px;
        margin: auto;
        background-color: #E1E7FF;
        border: 3px solid #fff;
        display: block;
        left: 0; right: 0;
        padding: 15px;
        position: fixed;
        font-size: 14px;
        top: 25%;
        opacity: 0.1;
    }   
</style> 
</head>
<body>
        
    <?php
    $pp_style = "
        min-width: 320px;
        max-width: 400px;
        margin: auto;
        background-color: #E1E7FF;
        border: 3px solid #fff;
        display: block;
        left: 0; right: 0;
        padding: 15px;
        position: fixed;
        font-size: 14px;
        top: 25%;
        opacity: 0.1;
        ";
 
    print('
    <div class="popup" id="gallery_popup">
    ');         
    ?>      
        <img src = "img/button_left.png" title = "Предыдущая"/>
        <img src = "img/button_right.png" title = "Следующая"/>
    </div>
    <button onClick="Hide('gallery_popup', 0.1);">Hide</button>
    <button onClick="Show('gallery_popup', 1);">Show</button>
    
</body>
</html>

ничего не изменилось...

@Ukkas · 10.02.2014, 11:15

Firework, в функциях не срабатывает проверка

JavaScript
1
2
op = parseFloat(obj.style.opacity);
if(op < x) {....}

внутрь этой конструкции мы не попадаем, потому что op у нас не определен.

@Firework · 10.02.2014, 11:17 **[ТС]**

х - аргумент, который содержит уровень прозрачности.

Hide('gallery_popup', 0.1). Тут как раз х = 0.1

@Ukkas · 10.02.2014, 11:46

Firework,

HTML5
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script language = 'javascript'>
        var hT, sT;
        
        function setElementOpacity(sElemId, nOpacity)
        {
            var opacityProp = getOpacityProperty();
            var elem = document.getElementById(sElemId);
            if (!elem || !opacityProp) return; // Если не существует элемент с указанным id или браузер не поддерживает ни один из известных функции способов управления прозрачностью
            if (opacityProp=="filter")  // Internet Exploder 5.5+
            {
                nOpacity *= 100;
                // Если уже установлена прозрачность, то меняем её через коллекцию filters, иначе добавляем прозрачность через style.filter
                var oAlpha = elem.filters['DXImageTransform.Microsoft.alpha'] || elem.filters.alpha;
                if (oAlpha) oAlpha.opacity = nOpacity;
                else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Для того чтобы не затереть другие фильтры используем "+="
            }
            else // Другие браузеры
                elem.style[opacityProp] = nOpacity;
        }
 
        function getOpacityProperty()
        {
            if (typeof document.body.style.opacity == 'string') // CSS3 compliant (Moz 1.7+, Safari 1.2+, Opera 9)
                return 'opacity';
            else if (typeof document.body.style.MozOpacity == 'string') // Mozilla 1.6 и младше, Firefox 0.8
                return 'MozOpacity';
            else if (typeof document.body.style.KhtmlOpacity == 'string') // Konqueror 3.1, Safari 1.1
                return 'KhtmlOpacity';
            else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) // Internet Exploder 5.5+
                return 'filter';
            return false; //нет прозрачности
        }
 
    </script>
    <style type='text/css'>
            /* Формируем и позиционируем всплывающее окно */
        .popup {
            min-width: 320px;
            max-width: 400px;
            margin: auto;
            background-color: #E1E7FF;
            border: 3px solid #fff;
            display: block;
            left: 0; right: 0;
            padding: 15px;
            position: fixed;
            font-size: 14px;
            top: 25%;
            opacity: 0.1;
            filter: alpha(opacity=10);
        }
    </style>
 
    <div class="popup" id="gallery_popup" >
        <img src = "img/button_left.png" title = "Предыдущая"/>
        <img src = "img/button_right.png" title = "Следующая"/>
    </div>
    <button onClick="setElementOpacity('gallery_popup', 0.1);">Hide</button>
    <button onClick="setElementOpacity('gallery_popup', 1);">Show</button>

Только это вариант без задержки по времени.

@Firework · 10.02.2014, 11:54 **[ТС]**

Благодарю, но всё так и не понял, почему есть разница в стиле css и style html. Вроде одно и тоже написал.

@Ukkas · 10.02.2014, 11:58

Firework, у меня есть подозрение, что parseFloat(obj.style.opacity) срабатывает только когда задан именно стиль. Точно не уверена, но опытным путем я это сейчас выяснила.

@Firework · 10.02.2014, 12:06 **[ТС]**

Сообщение от Ukkas

Firework, у меня есть подозрение, что parseFloat(obj.style.opacity) срабатывает только когда задан именно стиль. Точно не уверена, но опытным путем я это сейчас выяснила.

А что за опыты ставили?

@Ukkas · 10.02.2014, 13:44

Firework,

JavaScript
1
2
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
alert(op);

Нажимала на кнопочку и смотрела какое значение у op.
Если убрать style, то значение Nan, а с ним - значение числовое.

Новые блоги и статьи Все статьи Все блоги /
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .

@Ukkas 153 / 126 / 39 Регистрация: 02.05.2012 Сообщений: 573
	10.02.2014, 10:32
	Firework, проблема в свойстве filter, которое не работает уже почти нигде http://htmlbook.ru/css/filter 0

@Firework 102 / 93 / 36 Регистрация: 01.04.2013 Сообщений: 654
	10.02.2014, 11:17 [ТС]
	х - аргумент, который содержит уровень прозрачности. Hide('gallery_popup', 0.1). Тут как раз х = 0.1 0

@Firework 102 / 93 / 36 Регистрация: 01.04.2013 Сообщений: 654
	10.02.2014, 11:54 [ТС]
	Благодарю, но всё так и не понял, почему есть разница в стиле css и style html. Вроде одно и тоже написал. 0

@Ukkas 153 / 126 / 39 Регистрация: 02.05.2012 Сообщений: 573
	10.02.2014, 11:58
	Firework, у меня есть подозрение, что parseFloat(obj.style.opacity) срабатывает только когда задан именно стиль. Точно не уверена, но опытным путем я это сейчас выяснила. 0