Get CSS value as written in stylesheet with jQuery or RegEx

Question

I was looking at CSS3 calc() and I wondered whether it is possible to subtract a value from the input string with jQuery (or RegEx).

For example:

div         


        

Answer 1

The short simple answer here is no, you can't do that. The browser APIs won't give you the raw CSS code, so you can't do what you're asking.

About the only way you're going to achieve this is to load the stylesheet file into your javascript manually (ie via an Ajax call), and parse it. This is a lot of overhead for the browser.

It is a technique used by some polyfill scripts to implement CSS features that aren't available in certain browsers (eg this script for Media Queries support in IE, but for just checking values as you're doing I would say it's more effort than it's worth for a smaller question like this.

If you're willing to take the plunge and parse the whole CSS file manually in your JS code just for the sake of retrieving the calc values, then your best bet may be to crib the parsing code from one of the existing polyfill scripts. But if I were in your shoes I'd find an alternative solution to the underlying problem rather than trying to force this idea to its logical conclusion.

I guess the underlying problem is that question really needs to be turned on its head: Why do you have a CSS calc with fixed values of 100% and 50px if you don't know in the code what those values will be? The whole point of calc is to allow you to specify a combination of known values. This isn't some unknown user-entered value (or at least, it shouldn't be), so how come your Javascript doesn't know the values already?

If there is a disconnect between your JS and your CSS code, you should consider how to deal with it higher up the chain than the browser, because even if you do manage to get the values out of the calc using Javascript, it means that the browser will have to be doing that same set of processing over and over again on every page load, for values that are the same every time. That's a lot of wasted effort.