Разница между стилем 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, а с ним - значение числовое.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@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