Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум web-программистов > HTML, CSS
Войти
Регистрация
Восстановить пароль
Правила Карта Блоги Социальные группы Поиск Сообщения за день  
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
1

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

10.02.2014, 10:18. Просмотров 728. Ответов 9
Метки нет (Все метки)

Такой код
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 не будет скрываться и показываться при нажатии на кнопки.
Почему?
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 10.02.2014, 10:18
Ответы с готовыми решениями:

Выделение стилем css открытой ссылки во фрейме
Имеется вот такой фреймовый дизайн. содержимое файла index.html &lt;!DOCTYPE html&gt; &lt;html&gt;...

Как уменьшить размер кнопки которая задается стилем в css?
В шаблоне имеется кнопка которая задаетя таким кодом css /* Button */ input, input, input,...

Найти все слова/словосочетания с заданным стилем и ДОБАВИТЬ к ним теги HTML
Собственно, задача - превратить Word в автоматический HTML-редактор. К примеру, в тексте есть...

Связь между страницей в PHP и страницей с ее стилем
В учебном блоге приходится кое-что менять в стилях. И изменения в файле CSS не выполняются....

__________________
Помогаю в написании курсовых работ и дипломов здесь.
9
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
10.02.2014, 10:32 2
Firework, проблема в свойстве filter, которое не работает уже почти нигде http://htmlbook.ru/css/filter
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
10.02.2014, 10:37  [ТС] 3
Цитата Сообщение от 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>
ничего не изменилось...
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
10.02.2014, 11:15 4
Firework, в функциях не срабатывает проверка
Javascript
1
2

op = parseFloat(obj.style.opacity);
if(op < x) {....}
внутрь этой конструкции мы не попадаем, потому что op у нас не определен.
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
10.02.2014, 11:17  [ТС] 5
х - аргумент, который содержит уровень прозрачности.

Hide('gallery_popup', 0.1). Тут как раз х = 0.1
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
10.02.2014, 11:46 6
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>
Только это вариант без задержки по времени.
1
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
10.02.2014, 11:54  [ТС] 7
Благодарю, но всё так и не понял, почему есть разница в стиле css и style html. Вроде одно и тоже написал.
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
10.02.2014, 11:58 8
Firework, у меня есть подозрение, что parseFloat(obj.style.opacity) срабатывает только когда задан именно стиль. Точно не уверена, но опытным путем я это сейчас выяснила.
0
102 / 93 / 36
Регистрация: 01.04.2013
Сообщений: 649
10.02.2014, 12:06  [ТС] 9
Цитата Сообщение от Ukkas Посмотреть сообщение
Firework, у меня есть подозрение, что parseFloat(obj.style.opacity) срабатывает только когда задан именно стиль. Точно не уверена, но опытным путем я это сейчас выяснила.
А что за опыты ставили?
0
153 / 126 / 39
Регистрация: 02.05.2012
Сообщений: 573
10.02.2014, 13:44 10
Firework,
Javascript
1
2

op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
alert(op);
Нажимала на кнопочку и смотрела какое значение у op.
Если убрать style, то значение Nan, а с ним - значение числовое.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 10.02.2014, 13:44

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

Кнопка со стилем
Добрый день, не подскажите новичку как сделать кнопку со стилем, по нажатию на которую бы...

Заморочка с стилем
Всем привет!!! Ребята подскажите как правильно сделать ссылку-картинку. Вот часть кода с файла...

Qt кнопочка с стилем
Привет! Я хочу добавить к кнопочкам стили. В вебе есть библиотека - bootstrap. Могу ли я как-то...

Проблемы Со Стилем.
Проблемы со стилем. Перестал работать стиль OneUI при отображении в браузере. В Lotus отображает...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Реклама - Обратная связь
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.