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

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

.span6 { width: 570px; } 

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

 $('
').addClass('span6').width(); 

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

  $('
').addClass('span6').hide().appendTo('body').width(); 

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

Answer 1

为了读取CSS属性值，您需要动态地将隐藏元素插入DOM，读取属性并最终将其删除：

 var getCSS = function (prop, fromClass) { var $inspector = $("
").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在这里

Answer 2

何塞的伟大答案。 我修改它以帮助更复杂的css选择器。

 var getCSS2 = function (prop, fromClass, $sibling) { var $inspector = $("
").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