11

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

 .span6 {
 width: 570px;
 }

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

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

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

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

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

4

2 回答 2

29

为了从不存在的元素中读取 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在这里

于 2012-06-09T06:36:40.740 回答
4

何塞的回答很好。我对其进行了修改以帮助处理更复杂的 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

于 2014-03-17T21:37:05.293 回答