jquery - 获取尚未应用的类的 CSS 属性值答案

【问题标题】：jquery -Get CSS properties values for a not yet applied classjquery - 获取尚未应用的类的 CSS 属性值
【发布时间】：2012-06-13 02:30:40
【问题描述】：

我在这里问过同样的question（无法评论它，也许没有特权），我想获取样式表中定义但尚未应用于 dom 中的任何元素的 css 宽度值，（它的引导程序带有响应式媒体查询的网格的 CSS）

 .span6 {
 width: 570px;
 }

但是上面引用的问题中提供的解决方案返回 0，即像这样

$('<div/>').addClass('span6').width();

但是如果我做这样的事情就可以了

 $('<div/>').addClass('span6').hide().appendTo('body').width();

不附加该 div 的任何简单方法？

【问题讨论】：

如果你真的（真的）想避免插入元素，你可以用你需要的宽度制作一个地图：p
你为什么要这样做？也许有另一种/更简单的方法来解决您的问题？
上次我看到一个“使用 jquery 获取样式属性”的问题，它以一些正则表达式作为接受的答案，我猜你当前的解决方案很简单。您可以在获得所需的 CSS 属性值后调用 .remove() 来清理 DOM，或者始终使用 display:none 元素来应用 CSS 并获取值，然后删除应用的 CSS 类。
@MoinZaman 我想在决定是否添加特定类之前进行一些操作，div 中有一个图像，它的宽度可以是任何东西
Get CSS properties values for a not yet applied class 的可能副本 - 我是原始“错误”答案的作者，该答案已更新为更多信息。

标签： javascript jquery css html width

【解决方案1】：

为了从不存在的元素中读取 CSS 属性值，您需要将该元素（作为隐藏元素）动态插入 DOM，读取该属性并最终将其移除：

var getCSS = function (prop, fromClass) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    $("body").append($inspector); // add to DOM, in order to read the CSS property
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

jsFiddle here

【讨论】：

这基本上就是 OP 正在做的事情 - .css('display', 'none') 与 .hide() 几乎相同，但 +1 用于将其扩展为可用功能和 finally 块在 @ 之后运行987654327@.
可能是使用“少写多做 jquery”的唯一简单方法：P
我已经为background-position 尝试过，但它返回的是0% 0% 而不是实际值...
@AlexFilipovici 你应该做错了什么。你可以在这里看到效果很好。 jsfiddle.net/cVfFc/1

【解决方案2】：

何塞的回答很好。我对其进行了修改以帮助处理更复杂的 CSS 选择器。

var getCSS2 = function (prop, fromClass, $sibling) {

    var $inspector = $("<div>").css('display', 'none').addClass(fromClass);
    if($sibling != null){
        $sibling.after($inspector); //append after sibling in order to have exact 
    } else {
        $("body").append($inspector); // add to DOM, in order to read the CSS property
    }
    try {
        return $inspector.css(prop);
    } finally {
        $inspector.remove(); // and remove from DOM
    }
};

JSFiddle

【讨论】：