1

Suppose, I have 'td' style mentioned in an included style sheet called custom.css and also in the style section as in code below, then is there a way in jQuery to get the style mentioned in stylesheet.

<!DOCTYPE html>
<html>
 <head>
   <link type="text/css" href="../custom.css" rel="stylesheet" />
    <style type="text/css">
      td {border: 2px solid red;background-color:lightyellow;}
    </style>
 </head>

In custom.css there is a td style defined as below.

 td {border: 1px dashed black;background-color:pink;}
Sunil
  • 20,653
  • 28
  • 112
  • 197
  • you mean actually grab the style element with jquery? and parse through the styles? – mattnull Aug 15 '12 at 18:15
  • Yes, since the td CSS exists in the stylesheet custom.css and also in the style defined under style tag. – Sunil Aug 15 '12 at 18:20
  • this may help you: [link](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) – MCSI Aug 15 '12 at 18:24
  • What problem are you really trying to solve here? You can reach into style sheets and get values directly from the stylesheet, but it works differently in different browsers and is not usually required to solve problems. Please describe the problem and there is probably a better way to solve it. – jfriend00 Aug 15 '12 at 18:25
  • I think some people are misunderstanding the question. There are two style declarations affecting an element. He would like to determine what the computer style of the element was BEFORE the second rule applied – Chris Baker Aug 15 '12 at 18:25
  • Chris - Yes, I need to get at the td style in custom.css. Also, the custom.css link may appear before or after the style tag declaration. – Sunil Aug 15 '12 at 18:30
  • MCSI - The link you gave seems helpful but can you come up with a jQuery selector I would use in my situation using the code in link you provided? Thanks. – Sunil Aug 15 '12 at 18:34

1 Answers1

0

There is no jQuery selector to do this. Javascript accesses the DOM, which doesn't directly "know" why an element has the computed style that it does. Further and because of this, DOM does not keep track of what the computed style would be without a given style declaration.

That said, one can disable a given style sheet:

http://jsfiddle.net/dPA9u/

You can use this method to turn off a given style sheet, check the computed style of your target element, then re-enable the stylesheet. You'll end up with the previous style, but the user won't see anything happen:

var ele = document.getElementById('my_div');
document.styleSheets[3].disabled = true;
var bg_color = window.getComputedStyle(ele).backgroundColor;
document.styleSheets[3].disabled = false;
alert('Original background color is: '+bg_color);

Try it: http://jsfiddle.net/GDSEK/1/

Putting it together, you can craft a script that loops through document.styleSheets to find the target sheet, disable it, measure the computed style of the target element, then re-enable the target sheet.

This does not contend with inline styles -- but you can check those too by disabling all the style sheets, then checking on element.style

Documentation

Chris Baker
  • 49,926
  • 12
  • 96
  • 115