CODEWITHSUNDEEP
javascriptjqueryhtmlcss
crowhill
crowhill

Reputation: 2548

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

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.

Upvotes: 0

Views: 1562

Answers (2)

Hugo Silva
Hugo Silva

Reputation: 6938

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();

Upvotes: 1

crowhill
crowhill

Reputation: 2548

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?

Upvotes: 1

Related Questions