jquery -Get CSS properties values for a not yet applied class

Question

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?

If you REALLY (really) want to avoid inserting the element, you could make a map with the widths you need :p — leopic
– leopic, Commented Jun 9, 2012 at 6:19
Why do you want to do that? Maybe there's an alternate / easier way to solve your issue? — Moin Zaman
– Moin Zaman, Commented Jun 9, 2012 at 6:19
The last time I saw a "get style properties with jquery" question it ended up with some regex as accepted answer, I guess your current solution is simple enough. You could call .remove() to clean the DOM after getting your desired CSS property value or always have a display:none element to apply the CSS to and get the value, removing the applied CSS class afterwards. — Fabrício Matté
– Fabrício Matté, Commented Jun 9, 2012 at 6:35
@MoinZaman i want to do some manipulation before deciding that particular class should be added or not, div has a image in it ,its width can be anything — Jaideep Singh
– Jaideep Singh, Commented Jun 9, 2012 at 6:46
possible duplicate of Get CSS properties values for a not yet applied class - I was the author of the original 'bad' answer which has since been updated with more info. — Bobby Jack
– Bobby Jack, Commented Jun 13, 2012 at 12:24

Jose Rui Santos · Accepted Answer · 2019-09-12 07:04:33Z

29

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
    }
};

jsFiddle here

edited Sep 12, 2019 at 7:04

answered Jun 9, 2012 at 6:36

Jose Rui Santos

15.3k9 gold badges61 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fabrício Matté Over a year ago

That'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 the finally block which runs 'after' a return.

Jaideep Singh Over a year ago

may be thats the only easy way to do it with "write less and do more jquery" :P

Alex Filipovici Over a year ago

I've tried it for background-position, but it's returning 0% 0% instead of the actual value...

Jose Rui Santos Over a year ago

@AlexFilipovici You should be doing something wrong. You can see here that works fine. jsfiddle.net/cVfFc/1

Biff MaGriff · Accepted Answer · 2014-03-17 21:37:05Z

4

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
    }
};

JSFiddle

answered Mar 17, 2014 at 21:37

Biff MaGriff

8,2619 gold badges65 silver badges100 bronze badges

Collectives™ on Stack Overflow

jquery -Get CSS properties values for a not yet applied class

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related