Use jQuery to get css properties of a class/id that that doesn't exist in the page

Question

As it said in the title. I want this javascript...

$("#mrNotAppearing").css("background-color");

to return "red" based on this css...

#mrNotAppearing {
    background-color: red;
}

given that there are no elements in the document that actually have the id mrNotAppearing

I'm using media query checks with jQuery to get window widths as seen here and I thought it might be nice to use some "dummy" css that definitely won't get in the way of anything.

I'm also open to other suggestions that achieve the same result.

Plan B, I'll just go with actual css or add some dummy property to body?

Updating for clarity:

It can be difficult to sync javascript that requires particular window widths with media query widths in the css, which can cause layout problems.

Instead, you can query the status of the css itself. As so:

body {
    background-color: blue;
}
@media (min-width: 42em) {
    body {
        background-color: red;
    }
}

Then, in the javascript:

if($(body).css("background-color")==="red"){
    // we know down to the pixel that it's safe to trigger the javascript  
    // because the media query went off.
}

All I'm trying to do is add a dummy entry in the css that will be used solely for triggering the javascript. I could use an existing property--and may have to--but I'd like to make it explicit what I'm doing. Or I'm at least toying with the idea.

I apologize for the confusion. I was going for brevity.

P.S. the whole point of the question is to use a style that will 100% not be appearing in the document. And will never change, even if the layout does.

This sounds like a case where you are trying to do something to solve something else, but you should be asking how to solve that something else. — Andrew
– Andrew, Commented May 22, 2015 at 2:59
If you know that you want the background color from #mrNotAppearing, why don't you just give the element that will be using that color, the mrNotAppearing id? Or create a new class, more likely. — Andrew
– Andrew, Commented May 22, 2015 at 3:00
Possible duplicate of : stackoverflow.com/questions/2707790/… — Ankit
– Ankit, Commented May 22, 2015 at 3:00
One ugly way could be retrieving the whole style from style tag and $('style') and parsing its content. — Ankit
– Ankit, Commented May 22, 2015 at 3:11

crowhill · Accepted Answer · 2015-05-22 03:54:36Z

1

EDIT: Ha, okay, final answer. em does indeed return as px. So...

I'm going to answer my own question because I'm pretty sure it isn't making sense to anyone. Also, I don't know if this is a good idea, but it seems to work for my purposes. So, my solution:

Style the <style> tag. It's in the DOM, it's not structural, and jQuery can get css properties from it. Like so...

style {
    width: 672px;
}

and then...

$("style").css("width");

will return 672px

I'm probably over-thinking this. And still probably not making sense. And I have no idea if this works on any browser but Chrome or if it's a terrible idea for some reason, but I think it's kind of appealing, semantically.

Any other thoughts?

edited May 22, 2015 at 3:54

answered May 22, 2015 at 3:23

crowhill

2,6083 gold badges29 silver badges61 bronze badges

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

4 Comments

Rick Hitchcock Over a year ago

I think it's brilliant, and I can't think of any reason it wouldn't work. Works in Chrome, IE, Firefox, Safari, and Opera.

crowhill Over a year ago

Yeah, I just need to figure our which property to abuse. Custom properties would be ideal, but I'm not having much luck so far. .css("-layout") would be really great.

crowhill Over a year ago

Probably the best of the existing options.

Rick Hitchcock Over a year ago

I don't think you'll do better than this, and you can accept your own answer.

Community · Accepted Answer · 2017-05-23 11:51:08Z

1

You have access to all css rules through document.styleSheets, there is no need to apply to an element.

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Here is another answer on how to get the style based on a class name:

How do you read CSS rule values with JavaScript?

EDIT

Although, it would be a lot easier to render the element off canvas for a brief moment:

var $dummy  = $('<div>').addClass('class1 class2 class3').css({position: fixed, left: 100%}).appendTo('body');

// collect all info you need here;

$dummy.remove();

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered May 22, 2015 at 3:59

Hugo Silva

6,9863 gold badges29 silver badges42 bronze badges

3 Comments

Rick Hitchcock Over a year ago

If the style is responsive based on a media query, iterating through styleSheets won't help.

Hugo Silva Over a year ago

I am pretty sure you could find any style in there, combine with matchMedia, and find what you need. But it would be a lot more convenient to render a div off screen. I will update with a new suggestion.

Rick Hitchcock Over a year ago

matchMedia is new to me, but looks like it would work in this instance. But I'm not sure the OP's own solution can be improved on.

Collectives™ on Stack Overflow

Use jQuery to get css properties of a class/id that that doesn't exist in the page

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related