Accessing Css Properties

[vizskywalker 0]

I have a site I'm trying to get up and running (http://forums.xisto.com/no_longer_exists/) and I need to have access in javascript to the various css propertis for the elements on the page. So I tried good old <element>.style,<property> but low and behold it didn't work, probably, as I later found out, because it is an external stylesheet (which you are supposed to do). So, to learn more about what was going on, I simply outputed <element>.style and received "[object CSSStyleDeclaration]" as the result. So I serached CSSStyleDeclaration and found this. as well as some other sites saying the same thing in less detail.

So then I tried <element>.style.getPropertyValue("<property>") and I received blank output.

Now, two questions:

1) Why am I receiving blank output?

2) what can I do about it?

~Viz

[iGuest 3]

You'd really would need to work on some type of function to make it work across the majority of browsers.

So what browser are you using?

The reason it's appearing blank is weird browser behaviour, if you set it inside the browser for your code, e.g.

<element>.style.setProperty('<property>', '<propertyvalue>', null);

and then try it, it won't be blank, it'll display the propertyvalue you set, although I believe that destroys the purpose right?

Since I only have Firefox to test, here's how to do it for Firefox:

window.getComputedStyle(<element>,null).<property>

I'll list all the methods I can think of that work on different browsers -

<element>.style.<property><element>.currentStyle.<property><element>.style.getPropertyValue('<property>')

There's probably more but that's all I can think of for now, some of these work if you set them inside the browser too with other browsers.

Hopefully this helps you.

Cheers,


MC

[vizskywalker 0]

I'm actively using firefox, but trying to get the page to work for all sites (so in the end I'l probably wind up using a selected css stylesheet).Here's additional data I have for you:1) <element>.currentStyle.<property> works for IE2) <element.style.<property> = foo seems to work anywhere (seems to being the key word, and granted this is assignment)3) I finally got the method for firefox working, thanks.Which would you recommend:A) On loading the page, going thorugh and using setProperty() in conjunction with a browser detection routine and browser specific code to set the properties so later I can just use etPropertyValue() Simply using the browser detection and browser speciific code when I need itThanks.~Viz

[iGuest 3]

I don't know which would be the best method but I would probably try for Option B but using Object Detection instead, as there's numerous browsers out there and they too could possibly support any of these methods.From there it would just be a matter of creating functions.Cheers,MC

[vizskywalker 0]

here's a thought: how about an if-else series of statements to first try one method, then try the next on failure, etc. Since I keep getting null when it doesn't work, I could just compare the value to null. Or, even better, does java have an exist() function to check if something is null or not?~Viz