Accessing Style Property with ID

[joealey2003]

Hi all...


I included a css file on my html and i need to check some properties.

The html is: <style id="myid" src="mycsspage.css"> </style>

Now i need something to access it like:

alert(document.getElementById("myid").bottomline.color);

or

alert(document.all["myid"].style.bottomline.color);

The code above doesn't work on IE and Netscape 7.1...


Any hints???

 

[RobG]

Hi all...


I included a css file on my html and i need to check some properties.

The html is: <style id="myid" src="mycsspage.css"> </style>

Now i need something to access it like:

alert(document.getElementById("myid").bottomline.color);

If you are trying to access a particular style property of an
element, use:

alert(document.getElementById("myid").style.property);

where "property" is the style property you are trying to access.
You must change hyphenated style properties to "camelCase", e.g.
background-color becomes backgroundColor.

If you want to get all the style properties to see what's set,
get the element attributes collection and print out just the
style. e.g.

function doStyle(elementID) {
var eAtt = document.getElementById(elementID).attributes;
for (var i=0, len=eAtt.length; i<len; i++) {
if(eAtt.name == 'style')
alert(eAtt.value);
}
}

or

alert(document.all["myid"].style.bottomline.color);

The code above doesn't work on IE and Netscape 7.1...

Because there is no style property for "bottomline". A list of
the DOM CSS properties that work with Mozilla/Firefox are here:


<URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref18.html#1002335>

If, on the other hand, you are trying get the *class* bottomline
and it's attributes that you have defined in the style sheet,
that is a totally different thing. You must access the
styleSheets collection, then the cssRules collection, then to
isolate the particular rule, look for the selectorText
(essentially equivalent to the class name, including the leading
'.', '#', etc.). But beware, IE puts an asterisk (*) in front of
the selectorText.

Say the following class called "aClass" is the first rule in the
first style sheet:

.aClass {color: grey; background-color: red;}

You can get all the style properties as:

document.styleSheets[0].cssRule[0].style.cssText

or just the selector text (class name):

document.styleSheets[0].cssRules[0].selectorText;

But beware, that just gets the definition from the style sheet,
it doesn't tell you what is actually set on the element.

Have a look around here:


<URL:http://www.mozilla.org/docs/dom/domref/dom_style_ref14.html#998514>

 

[joealey2003]

First, thanks for your reply Rob.

Second, i will tell you the truth.

What i need is to access strings out of my server and include it on my
html.

I thougth in puting this strings on a text fileld of an style and
access it.

Why?

I can't use <scripts src="http://..."> because of security risk.

So, i am trying to include an accessable and not runable code on my
html.

I know that ActiveX do it and java too but for compatibility reasons i
prefered css.

Tried your code:

document.styleSheets[0].cssRule[0].style.cssText

works on Nescape but not in IE.

Frames doesn't sound nice too.

If you have an idea on how can i do this external including, please
post it.

Thank you again.

 

[RobG]

First, thanks for your reply Rob.

Second, i will tell you the truth.

What i need is to access strings out of my server and include it on my
html.

I thougth in puting this strings on a text fileld of an style and
access it.

Why?

I can't use <scripts src="http://..."> because of security risk.

I don't really understand what you are doing. Presumably a server
is generating strings for some purpose and putting them in a
file. Do you then want the browser to be able to securely access
the same file?

Maybe your best option is to investigate XMLHTTP - do a search on
this newsgroup and post anew for more help.

So, i am trying to include an accessable and not runable code on my
html.

Why not use a meta tag? e.g.

<meta name="aStringOfText" content="blah blah blah">

Then use document.getElementsByTagName('meta') to get at it?

var c = document.getElementsByTagName('meta')['aStringOfText']
alert(c.content); // blah blah blah

With appropriate feature detection added. Of course, then the
user will see the content in the HTML source, so this may raise
your security issues again.

I know that ActiveX do it and java too but for compatibility reasons i
prefered css.

If you get this to work via CSS I think that's called a hack
or kludge.

Tried your code:

document.styleSheets[0].cssRule[0].style.cssText

works on Nescape but not in IE.

Yeah, sorry, the IE equivalent is:

document.styleSheets[0].rules[0].style.cssText

More IE stuff is here:


<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/obj_stylesheet.asp>

You need to use feature detection to sort which method to use (IE
or other). And IE 6 seems to have dropped the leading '*' on
selectorText.

The equivalent w3c spec is here:


<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-cssRules>