Доступ к свойству блока CSS из JQuery - PullRequest
Новая
       0

Доступ к свойству блока CSS из JQuery

3 голосов
/ 26 января 2011

У меня есть сайт, который в значительной степени основан на JavaScript, но я все еще хочу, чтобы он был легко изменен с помощью CSS.
Возьмите этот пример ... есть div, который изменяет непрозрачность при наведении курсора на jQuery, но я бы хотел, чтобы дизайнер мог выбрать значение непрозрачности. Я думал о создании блока в CSS только для объявления этих констант, например: 

.constants_someid{
  opacity: 0.5;
}

и затем через jQuery я беру эту непрозрачность как 

 var opacity = jQuery('css:constants_someid').attr('opacity');

Я не знаю, является ли это хорошим способом сделать декларацию этих констант, но это то, что пришло на ум прямо сейчас.

Что вы, ребята, думаете?

Спасибо
Джо

Ответы [ 3 ]

2 голосов
/ 26 января 2011

@ lonesomdays решение является очевидным и хорошим. Вот мой дубль; 

function getConfig(className,property)
{
    var dummy = $('<span class="' + className + '" />');
    var value = dummy.appendTo('body').css(property);
    dummy.remove();
    return value;
}

Чтобы позвонить, используйте getConfig('constants_someid','opacity')

рабочая скрипка: http://jsfiddle.net/5GWHU/

2 голосов
/ 26 января 2011

Вместо этого определите их в файле Javascript: 

var settings = {
    opacity: 0.5
};

Такой синтаксис должен быть достаточно легким для изменения дизайнером. Затем вы можете использовать его как settings.opacity.

Затем можно использовать $.extend для объединения настроек, определенных дизайнером, с настройками по умолчанию: 

var defaults = {
    opacity: 0.9,
    speed: 500
}

settings = $.extend({}, defaults, settings);
// returns { opacity: 0.5, speed: 500 }
0 голосов
/ 26 января 2011

Определение их как CSS-классов является хорошим методом, поскольку, как вы упомянули, его лучше поддерживать.

Однако я не думаю, что вы должны извлекать отдельные свойства из одного класса CSS constants. Вместо этого определите несколько значимых классов и добавьте / удалите их с помощью jQuery.

Например, отдельные классы CSS для динамического добавления: 

.faded-out {
   opacity: 0.5;
}

.highlight {
   background: yellow;
}

И соответствующий jQuery: 

jQuery('.someElements').addClass('faded-out');
jQuery('.otherElements').removeClass('highlight');
...