0

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.

crowhill
  • 2,398
  • 3
  • 26
  • 55
  • 1
    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 May 22 '15 at 02: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 May 22 '15 at 03:00
  • Possible duplicate of : http://stackoverflow.com/questions/2707790/get-a-css-value-from-external-style-sheet-with-javascript-jquery – Ankit May 22 '15 at 03:00
  • One **ugly** way could be retrieving the whole style from style tag and `$('style')` and parsing its content. – Ankit May 22 '15 at 03:11
  • That's further than I want to go. – crowhill May 22 '15 at 03:12
  • How/why is the element not "appearing"? Is it set to `display:none`? or hasn't been rendered in the DOM yet? If it's not in the DOM, then you'll need to add an event listener for when it gets added, then pull the property – Tim Hallman May 22 '15 at 03:16
  • No, I don't _want_ it in the DOM. That's the whole point. – crowhill May 22 '15 at 03:17

2 Answers2

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?

crowhill
  • 2,398
  • 3
  • 26
  • 55
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();
Community
  • 1
  • 1
Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
  • If the style is responsive based on a media query, iterating through `styleSheets` won't help. – Rick Hitchcock May 22 '15 at 04:04
  • 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. – Hugo Silva May 22 '15 at 04:13
  • `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. – Rick Hitchcock May 22 '15 at 04:15