Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get a css stylesheet value that is not interpreted by the browser?

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.

like image 750
Mathew Kurian Avatar asked Feb 18 '23 00:02

Mathew Kurian


2 Answers

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');
like image 183
Kevin M Avatar answered Feb 21 '23 03:02

Kevin M


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

like image 25
Juan Mendes Avatar answered Feb 21 '23 03:02

Juan Mendes