4

I would like to get a value of the css stylesheet that is not actually used by the browser during rendering.

For instance:

.blur {    
  data : "Great";
}

Let us say I use this class on a div as such:

<div class = "blur"></div>

What I tried and does NOT work.

$(".blur").css("data");

Expected Output

Great

EDIT: Sorry, I didn't mention this before, seems to be causing some confusion now. But please read this!

As I stated in the comment below and would like to emphasize, I have made the algorithm for generating a some text shadow on Internet Explorer---not the best algorithm, but still does the trick. However, I am trying to access the text-shadow attribute of a certain element but I can't since Internet Explorer doesn't store it since it doesn't really render it in the first place so I need to access the stylesheet data. So the question which I asked is again accessing "data" which too isn't stored just like textShadow for IE8, IE9.

4
  • 1
    It's not clear what you are asking Dec 28, 2012 at 20:19
  • Please explain why you want this. It makes no sense in my head, a style sheet should control the look and feel, not serve as a place to store data. Dec 28, 2012 at 20:24
  • 1
    You should never store data in your CSS! There is probably a better way to do this with just HTML. An example would be <div class="blur" data-info="Great"></div> Dec 28, 2012 at 20:25
  • @JuanMendes: I have made the algorithm for generating a some text shadow on Internet Explorer---not the best algorithm, but still does the trick. However, I am trying to access the text-shadow attribute of a certain element but I can't since Internet Explorer doesn't store it since it doesn't really render it in the first place so I need to access the stylesheet data. So the question which I asked is again accessing "data" which too isn't stored just like textShadow for IE8, IE9 Dec 28, 2012 at 20:26

3 Answers 3

4

You could store the data in an HTML5 data attribute.

<div class="blur" data-foo="great"></div>

and then retrieve it with jQuery

$('.blur').data('foo');
5
  • Might as well store it in a JS object, no need to pollute the HTML Dec 28, 2012 at 20:29
  • @JuanMendes the data-attributes are intended to store data on a per-element basis. A hash is only good if you want to store data on a per-document basis. Dec 28, 2012 at 20:30
  • Read his comment above. He doesn't really want to store arbitrary data, he's trying to access stylesheet attributes that the browser is ignoring because it doesn't support them.
    – Barmar
    Dec 28, 2012 at 20:31
  • @JuanMendes: It is not the most efficient way to add a data attribute whenever you want text shadow, it is the however more efficient if you can just read it from class of the current div. Please read my edit if for more information. Dec 28, 2012 at 20:31
  • In the OP's question, the data is not stored per element, it's in the CSS, I'm suggesting put that information into a JS object so the OP can do whatever they want with it. Dec 28, 2012 at 20:37
3

You can have raw access to style sheet tags, that's the best you can do, you can then parse the text for the information you're looking for with something like http://jsfiddle.net/V7Zmn/1/

// You'd have to find the right style tag
document.getElementsByTagName("style")[0].innerText
// outputs  a string like:   .blur {      color: red;  data : "Great";}  

This looks like a big hack, but I can't yet think of a way to do what you need in a more elegant way., a better approach would be to use something like IE's filters instead Text Shadow in Internet Explorer? I think your approach of trying to fix this problem on your own is going to take way more effort than it's worth and you'll be going against the flow, creating friction with other code.

.myclass {    
  text-shadow: 2px 2px gray;
  filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray')
}

Example

6
  • Thank you..No other way? Yes. It does seem like quite a hassle. Dec 28, 2012 at 20:37
  • 1
    @bluejamesbond First you asked me for the raw data (in Dark Falson's answer) so you could parse it, now you want a different way? You're at the hacking level, it will be a hassle, everyone is suggesting against it, I'm just giving you rope... It is the only answer that you could hang yourself with :) Dec 28, 2012 at 20:38
  • 1
    @bluejamesbond - You could try taking a look at a CSS parser written for JavaScript. Here is a link to one called JSCSSP.
    – Kevin M
    Dec 28, 2012 at 20:44
  • @KevinM Nice, it seems like it accepts unrecognized properties too. Dec 28, 2012 at 20:48
  • @bluejamesbond You can solve your text-shadow problem with less hacking by using IE's filters instead. See the update to my answer Dec 28, 2012 at 21:00
1

I'm not sure whether the browser is obligated to preserve attributes it does not understand. You could try using this code, which shows how to access a stylesheet rule programmatically. As noted by others, however, this is probably not the best use of CSS even if it happens to work.

1
  • @JuanMendes: You mean, I can't access the stylesheet directly and maybe parse through it. Dec 28, 2012 at 20:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.