VPF::значение default CSS свойства - Форум программистов

Leshak

Дата 15.2.2012, 20:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Проблема такова:
прежде чем изменить некоторое (любое) CSS свойство, хочу определить - а не было ли оно задано кем-то до меня?
то есть - отличается ли оно от default значения для данного свойства, текущего браузера?

то что мне на данный момент видится выглядит несколько монстрообразно...

Уважаемые!
Знает ли кто решение подобной проблемы?

Leshak

Дата 16.2.2012, 01:26 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Посмотрите на моего монстра - может есть идеи как Это сделать интереснее?

Код


    (function($){
        $.fn.ifcss = function( name_css, value_css ){
            if( $('#tstsCSSdefault').length <=0 ) {
                $('body').append('<div id="tstsCSSdefault"></div>');
            };
            if( this.css( name_css ) == $('#tstsCSSdefault').css( name_css ) ){
                this.css( name_css , value_css ) ;
            };
        };
    })(jQuery);

да - это jQuery...

и вроде работает...

Код



    $('#testOut0').ifcss( 'background-color', '#ffaa77' );
    $('#testOut0').ifcss( 'color', '#001155' );
    $('#testOut0').ifcss( 'font-size', '18px' );

у меня...

Leshak

Дата 16.2.2012, 02:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

а в таком виде

Код


    (function($){
        $.fn.ifcss = function( name_css, value_css ){
            if( $('#tstsCSSdefault').length <=0 ) {
                $('body').append('<div id="tstsCSSdefault"></div>');
            };
            this.each( function(){ 
                if( $(this).css( name_css ) == $('#tstsCSSdefault').css( name_css ) ){
                    $(this).css( name_css , value_css ) ;
                };
            });
        };
    })(jQuery);

этот монстр еще и с классами справляется...

Код


    $('#testOut0').ifcss( 'color', '#001188' );
    $('.test').ifcss( 'background-color', '#ffeeaa' );

все вроде ничего так... но вот не нравится мне, что надо создавать тестовый блок...

ksnk

Дата 16.2.2012, 08:21 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

А с чем справляется "монстр"? Как его предполагается использовать?
ifcss, по мнемонике должен бы выдавать "а не равно ли это свойство такому значению по умолчанию?" логического типа.

Сейчас оно делает что-то немнемоничное - устанавливает значение свойства, если оно совпадает с дефолтным, а если не совпадает - то ничего не делается... Одноразовая такая установка ;), без отмены

Еще пара мыслей.

Если вставляется тестовый дивчик в разметку, неплохо бы побеспокоится, что он не будет никому мешать

Код


if( $('#tstsCSSdefault').length <=0 ) {
    $('body').append('<div style="display:none;" id="tstsCSSdefault"></div>');
};

Его, вероятно, будет правильнее вставлять не в самой функции а выше её. Зачем нагружать функцию, одноразовой по сути, проверкой существования элемента?

Что такое "значение по умолчанию"? Это то, что прописано для этого элемента в css ?

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Leshak

Дата 16.2.2012, 10:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

Цитата(ksnk @ 16.2.2012, 08:21

)

Проблема решалась такая:
прежде чем изменить некоторое (любое) CSS свойство, хочу определить - а не было ли оно задано кем-то до меня?
то есть - отличается ли оно от default значения для данного свойства, текущего браузера?

и делает монстр совершенно не то, что вы подумали, а совсем наоборот...

что касается мнемоничности названия - как то не подумал
а если подумать - еще монстрик - ifCssDefault

мммммммммммм а вы вообще-то вопрос темы читали???? походу - НЕТ!

Leshak

Дата 16.2.2012, 11:53 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

в этом варианте немнемоничный монстр удаляет свой тестовый блок

Код



(function($){
        $.fn.ifcss = function( name_css, value_css ){
            if( $('#tstsCSSdefault').length <=0 ) { /* если тестового блока нет   */
                $('body').append('<div id="tstsCSSdefault"></div>'); /* создадим его*/
                setTimeout(function(){
                    $('#tstsCSSdefault').remove();  /* а  чуть позже удалим, чтобы не мешался */
                },111);
            };
            this.each( function(){ /*  проверяем все, что было обернуто на схожесть с идентичным свойством тестового блока */
                if( $(this).css( name_css ) == $('#tstsCSSdefault').css( name_css ) ){
                    /* и если до нас его никто не переопределил - задаем свое значение */
                    $(this).css( name_css , value_css ) ; 
                };
            });
        };
    })(jQuery);

неужели нет какого-то "шаблоного" решения??

Leshak

Дата 20.2.2012, 15:39 (ссылка)

(голосов:1)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 143
Регистрация: 19.10.2005

Репутация: нет
Всего: нет

практика показала - был неправ - погорячился...
если вначале списка css определений оказались установки
display или position
то - top, left, height (а может и какие нибудь другие - не проверял все свойства..
да и браузеры тоже...) - уже могут не быть такими как у нулевого объекта

поэтому меняем логику - сначала проверяем все свойста..
- изменившиеся сносим из списка
- остальные применяем..
-- тестовый объект создаем вначале, в конце удаляем

вот что вышло

Код



(function($){
    
    $.fn.ifcss = function( new__css ){
        if( $('#tstsCSSdefault').length > 0 ) { // если тестовый блок уже есть
            $('#tstsCSSdefault').remove();  //  удалим, для профилактики
        };
        $('body').append('<div id="tstsCSSdefault"></div>'); // создадим его новым
        
        this.each( function(){ //  проверяем все, что было обернуто на схожесть с идентичным свойством тестового блока 
            var new_css = new__css ;
            for ( var name in new_css ) {  // сравниваем полученный список со свойствами по умолчанию
                if( $('#tstsCSSdefault').css( name ) !== $(this).css( name ) ){
                //    testOUT.msgs('del - ' + name + ' : ' + $('#tstsCSSdefault').css( name ) + ' ? ' +$(this).css( name )+' : '+new_css[name]);
                    delete new_css[name];  // и удаляем из списка те, которые отличаются от default
                };
            };
            for ( var name in new_css ) { // оставшиеся отправляем по назначению
                $(this).css( name, new_css[name] );
            };
        });
        $('#tstsCSSdefault').remove();  // уже не нужен - удалим, чтобы не мешался 
    };        

})(jQuery);

а вот так используем

Код


var backList = $('#ctrl_height_size_backList');
backList.ifcss( {
    'display': 'none',        'position':'fixed',
    'top':'1px',            'left':'1px',
    'height':'100%',        'width':'100%',
    'padding': '0px',        'margin': '0px',
    'background-color': '#7777aa',    'cursor': 'pointer',
    'opacity':'0.7',        'z-index':'11'
});

Уважаемые - взляните (а может и испытаете) свежим взлядом - какие есть ошибки??

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »