1

How might I iterate over / access the properties of a referenced CSS file itself?

Hear me out, this may sound strange: I am currently wrapping the Google Maps API into some C# code (it outputs JavaScript); the Google Maps API, for things such as the Polygon class, appears to let you specify certain things like 'stroke-color' by passing in the appropriate value, but I can find no method for setting the classname for Polygon, nor immediately discover one for Polygon. So, since our HTML / CSS guy wants to skin stuff, I figured I'd use jQuery (.CSS()) or something to parse the CSS file, grab a defined property from within, and set the value in the JavaScript code.

Normally I'd set the color (for example programmatically, like so:

html.AppendLine("fillColor: '" + string.Format("#{0:X2}{1:X2}{2:X2}", fillcolor.R, fillcolor.G, fillcolor.B) + "',");

But I am trying to change it to something like this:

html.AppendLine("fillColor: $(\"Poly\").css(\"fill-color\"),");

And grab the property from a class in a referenced CSS file, defined like:

.Poly
{
    stroke-color: #FF00FF;  
    fill-color: #FF00FF;
}

jQuery seems to want a defined element to grab CSS properties from...it does not appear to be grabbing the values directly from the CSS file (I could be wrong). The above code, unfortunately, results in 'undefined.' This may be because I am rusty with JavaScript, / CSS or it may be that the way I am attempting to access things is not correct.

Has anyone any ideas how I might accomplish my ends here?

user978122
  • 5,531
  • 7
  • 33
  • 41
  • Is there any tag with class="Poly" in your html? If there is any, I think the code should be html.AppendLine("fillColor: $(\".Poly\").css(\"fill-color\"),"); – Huy Hoàng Phạm Aug 08 '13 at 16:08
  • There is not. As stated, I believe Google Maps is handling things via JavaScript...pure JavaScript...and as such, there is no option for finding a corresponding HTML tag. In other words, Maps is drawing a Polygon with JavaScript, not making use of HTML elements, and I'd like to use some JavaScript to grab some properties from a CSS file to pass into the Polygon's constructor. – user978122 Aug 08 '13 at 17:06
  • take a look at http://www.w3.org/TR/DOM-Level-2-Style/css.html – Dr.Molle Aug 08 '13 at 18:07

2 Answers2

0

There are some ways to access css property from a css file. They're a bit complicated.

Access CSS file contents via JavaScript

How do you read CSS rule values with JavaScript?

My solution for this case. First, you create an empty div, which apply the selected css

<div class="Poly" id="dumbPoly"></div>

Then you select the div, get the css value property

html.AppendLine("fillColor: $(\"#dumbPoly\").css(\"fill-color\"),")

=============================================================================

You can set the div invisible by jQuery

$('#dumbPoly').hide();

Or set the style of the div 

<div class="Poly" id="dumbPoly" style="display: none;"></div>
Community
  • 1
  • 1
Huy Hoàng Phạm
  • 145
  • 1
  • 2
  • 10
  • Ah, but what if something is applied to that div, a property by one name or another (I haven't listed them all, nor all the Google classes I will be supporting with this), and it causes the div to be visible? Then I have an unwanted visible div on my page. – user978122 Aug 08 '13 at 19:02
  • I edited the answer. Feel free to ask if you have any question. – Huy Hoàng Phạm Aug 09 '13 at 03:15
0

Accessing JavaScript files is a little quirky. It behaves differently in each browser - you may try something like this:

document.styleSheets[0].rules[0].selectorText

The first index iterates over every stylesheet in the document, the second over each rule in this sheet.

Alex
  • 1,141
  • 1
  • 13
  • 24