Accessing Style Property with ID

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • joealey2003@yahoo.com

    Accessing Style Property with ID

    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").bottoml ine.color);

    or

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

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


    Any hints???

  • RobG

    #2
    Re: Accessing Style Property with ID

    joealey2003@yah oo.com wrote:[color=blue]
    > 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").bottoml ine.color);[/color]

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

    alert(document. getElementById( "myid").style.p roperty);

    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(element ID) {
    var eAtt = document.getEle mentById(elemen tID).attributes ;
    for (var i=0, len=eAtt.length ; i<len; i++) {
    if(eAtt[i].name == 'style')
    alert(eAtt[i].value);
    }
    }
    [color=blue]
    >
    > or
    >
    > alert(document. all["myid"].style.bottomli ne.color);
    >
    > The code above doesn't work on IE and Netscape 7.1...
    >[/color]

    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.styleS heets[0].cssRule[0].style.cssText

    or just the selector text (class name):

    document.styleS heets[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>


    --
    Rob

    Comment

    • joealey2003@yahoo.com

      #3
      Re: Accessing Style Property with ID

      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.styleS heets[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.

      Comment

      • RobG

        #4
        Re: Accessing Style Property with ID

        joealey2003@yah oo.com wrote:[color=blue]
        > 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.[/color]

        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.
        [color=blue]
        > So, i am trying to include an accessable and not runable code on my
        > html.[/color]

        Why not use a meta tag? e.g.

        <meta name="aStringOf Text" content="blah blah blah">

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

        var c = document.getEle mentsByTagName( '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.
        [color=blue]
        >
        > I know that ActiveX do it and java too but for compatibility reasons i
        > prefered css.[/color]

        If you get this to work via CSS I think that's called a hack
        or kludge.
        [color=blue]
        >
        > Tried your code:
        >
        > document.styleS heets[0].cssRule[0].style.cssText
        >
        > works on Nescape but not in IE.[/color]

        Yeah, sorry, the IE equivalent is:

        document.styleS heets[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>


        --
        Rob

        Comment

        Working...