仅来自类的样式属性答案

【问题标题】：Style property only from classes仅来自类的样式属性
【发布时间】：2014-09-11 15:45:42
【问题描述】：

是否可以仅从类中获取某些 css 样式属性计算机，而不考虑可能的运行时操作？

例如：

.container{
}

.container .item {
}

.container.inactive .item {
    opacity:0.5;
}

在 JavaScript 中某处项目的不透明度通过 $('.item').css('opacity',1) 更改为 1，但随后我需要知道在没有运行时修改的情况下某个项目的不透明度是多少，基于仅在其类上。 css 的结构只是一个示例，在检查不透明度时不应将其考虑在内。

有可能吗？

【问题讨论】：

所以你不想用 javascript 覆盖你的样式。对吗？
运行时操作是什么意思？
为什么需要找出这个？我问是因为如果你想让它恢复正常，你只需取消通过 jQuery 设置的不透明度。
如果只是几个元素，你总是可以存储原始状态，但我知道这很快就会变得笨拙。
@Ruddy 是的，我需要删除在运行时通过 .css('opacity',xxx) 所做的任何更改，但我不知道该怎么做。我的猜测是 .css('opacity','') 可以完全清除不透明度，但如果它在课堂上是 0.5 呢？

标签： javascript jquery css class styles

【解决方案1】：

你可以像这样使用 jQuery 知道 CSS 属性的值（比如不透明度）：

var color = $(".item").css( "opacity" );

或者

var color = $(".container > .inactive > .item").css( "opacity" );

【讨论】：

> CSS 的结构只是一个例子，不应该考虑检查不透明度。
可能有数百个这样的元素，没有明确的 ID 之类的。可能我可以为文档 .ready 上的每个元素使用一些 item.data('formerOpacity',item.css('opacity')) ，然后在需要时执行 item.css('opacity',item.data('formerOpacity') ，但在我看来这有点矫枉过正。我想找到更有效的解决方案。特别是，原始的不透明度可以在一些早期的 .ready 初始化中改变
如果我正确理解您的需求，您想计算 css 属性的值。
类似这样的东西：
Lorem ipsum 繁琐地 boing bum dfg dsfgasdf fg asdfas。 Lorem ipsum 繁琐地 boing bum dfg dsfgasdf fg asdfas。 Lorem ipsum 繁琐地 boing bum dfg dsfgasdf fg asdfas。

【解决方案2】：

好的，我想我明白你想要什么。

看看我做的这个小提琴。 div 已经有 opacity: 0.6; 然后当我们单击 div 时，它将生成 div opacity: 0.2;（通过 jQuery）。要删除它，我们可以简单地从 div 中删除 style。

HTML：

<div>Click Me</div>

CSS：

div {
    width: 100%;
    height: 50px;
    background: red;
    opacity: 0.6;
}

jQuery：

var count = 0;
$("div").click(function () {
    if (count == 1) {

        $(this).removeAttr("style");
        count = 0;
    } else {

        $(this).css("opacity", "0.2");
        count = 1;
    }
});

Demo Here

这是一个简单的演示，向您展示它是如何工作的。使用.css 会将css 内联，不会改变样式表。

详细了解.csshere。

【讨论】：

我只需要重置不透明度，购买 .css('opacity',"") 就可以了。至少在 chrome 和 firefox 中，谢谢。