从 jquery 访问 css 块的属性

Question

我有一个严重基于 javascript 的网站，但我仍然想让它可以通过 CSS 轻松修改。
拿这个例子...有一个 div，它在悬停时通过 jQuery 修改了不透明度，但我希望设计者能够选择不透明度的值。
我正在考虑在 css 中创建一个块来声明这个常量，例如：

.constants_someid{
  opacity: 0.5;
}

然后通过 jQuery 我采取这种不透明度，就像

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

我不知道这是否是执行这些常量声明的好方法，但这就是我想到的现在。

你们觉得呢？

谢谢，
乔

Answer 1

相反，在 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 }

Answer 2

@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/

Answer 3

将它们定义为 CSS 类是一个很好的方法，因为正如您提到的，它可以更好地维护。

但是，我认为您不应该从单个 CSS constants 类中提取各个属性。相反，定义多个有意义类并使用 jQuery 添加/删除它们。

例如，用于动态添加的各个 CSS 类：

.faded-out {
   opacity: 0.5;
}

.highlight {
   background: yellow;
}

以及相关的 jQuery：

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