Question

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

 .span6 {
 width: 570px;
 }

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

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

但如果我这样做的话会有效

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

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

Answer 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

Answer 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

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

2 个答案: