jquery -Get CSS properties values for a not yet applied class
15,471
Solution 1
In order to read a CSS property value from a nonexistent element, you need to dynamically insert that element (as hidden) to the DOM, read the property and finally remove it:
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
}
};
Solution 2
Great answer by Jose. I modified it to help with more complex css selectors.
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
}
};
Author by
Jaideep Singh
Updated on June 03, 2022Comments
-
Jaideep Singh almost 2 years
i have a same question asked here(wasnt able to comment on it,maybe dont have a priviledge) , i want to get css width value defined in stylesheet but not yet applied on any element in dom ,(its bootstrap css with grid with responsive media queries)
.span6 { width: 570px; }
However solution provided in above referenced question return 0 i.e like this
$('<div/>').addClass('span6').width();
but works if i do something like this
$('<div/>').addClass('span6').hide().appendTo('body').width();
any easy way without appending that div?
-
Fabrício Matté almost 12 yearsThat's basically what OP is doing -
.css('display', 'none')
is virtually the same as.hide()
, but +1 for expanding it to an usable function and thefinally
block which runs 'after' areturn
. -
Jaideep Singh almost 12 yearsmay be thats the only easy way to do it with "write less and do more jquery" :P
-
Alex Filipovici over 10 yearsI've tried it for
background-position
, but it's returning0% 0%
instead of the actual value... -
Jose Rui Santos over 10 years@AlexFilipovici You should be doing something wrong. You can see here that works fine. jsfiddle.net/cVfFc/1