从 jquery 访问 css 块的属性答案

【问题标题】：Access a property of a css block from jquery从 jquery 访问 css 块的属性
【发布时间】：2023-03-16 00:48:01
【问题描述】：

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

.constants_someid{
  opacity: 0.5;
}

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

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

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

你们怎么看？

谢谢，
乔

【问题讨论】：

标签： javascript jquery css constants

【解决方案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 }

【讨论】：

这让我觉得它会让设计师更懒惰地创造东西，你怎么看？
我的意思是设计师都是CSS，当他们必须编辑其他文件时，他们往往不会这样做。但我想我会使用你的答案，因为这是最合适的解决方案

【解决方案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/

【讨论】：

显然不是明智的选择，但比其他答案更符合原始问题

【解决方案3】：

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

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

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

.faded-out {
   opacity: 0.5;
}

.highlight {
   background: yellow;
}

以及相关的jQuery：

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

【讨论】：

缺点是这会阻止动画，除非你使用 jQuery UI addClass 扩展。
@lonesomeday，非常正确，尽管 jQuery UI 的 addClass 是我忘记提及的这个场景的一个不错的选择。
设计师无法改变速度动画