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


Tags: javascript,html,css

Problem :

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.



Solution :

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


    CSS Howto..

    Both DIV Popups Shown Instead of One

    How to find address of css and js files?

    How to stop content from overlapping the footer?

    How do CSS radio tabs work?

    How I can set a different font size for my text by css?

    Optimizing CSS - how to properly reduce CSS footprint [closed]

    How to use bootstrap grid system overlaying a map

    How to get this simple layout done with CSS?

    a[title] not showing expected result [closed]

    How do you deal with Internet Explorer?

    how to style this via css in Bootstrap

    How do I make the dropdown menu width the same as the tab size?

    How to hide/show the content of a div with dynamic height?

    How to changes styles on first elements using CSS

    How to provide a stylesheet for rendering PDFs?

    How can I achieve this Flash effect using jQuery?

    How can i apply css rules dynamically in a div after the user enters the rules [closed]

    How to adjust width of right-aligned navbar

    How to remove style type css wordpress from header?

    Bootstrap progress bar with gradient color showing proportionally on active width

    CSS Less changes not showing. Compile or IIS error?

    How to add CSS to ASP.NET site with WebOptimization and Bundling

    How to make 3-corner-rounded triangle in CSS

    How to apply CSS on texte label beside an input?

    How a sloping/leaning background colour can be set to a text with HTML-CSS

    how to link stylesheet in css

    How to Set custom text Color in QTextEdit?

    Bootstrap How-to: checkbox should change text input value when selected/checked [closed]

    How to use active and before with CSS?

    How to apply Hovering on html area tag?