SitePoint Sponsor

User Tag List

Results 1 to 21 of 21

Hybrid View

  1. #1
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to get the style attributes of elements?

    while this works:
    document.getElementById('xxx').style.height = 100;

    This doesn't:
    x=document.getElementById('xxx').style.height;

    I tried to get the attributes using getAttribute but with no success.

    How can I get the value of ANY attribute of an element? (not just for height)

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, this works for me...
    NB! the parseInt() if you want to use width & height in calculations
    Code:
    <html>
    	<head>
    		<script language="javascript">
    			function doSomething()
    			{
    				var obj = document.getElementById("txt");
    				with(obj.style)
    				{
    					alert(width + '\n' + height + '\n' + backgroundColor + '\n');
    					alert('Area = ' + parseInt(width) * parseInt(height));
    				}
    			}
    		</script>
    	</head>
    	<body onload="doSomething()">
    		<p id="txt" style="width:100px;height:50px;background-color:#123456;">Some Text</p>
    	</body>
    </html>

  3. #3
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes, that works, but only if you use the inline style.
    If your styles are defined elsewhere i found out that you can get them using currentStyle in IE. Is there something similar for NS?

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    since currentStyle only applies to IE, just style is perfectly valid for everything else.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Style is valid, but it doesn't do what I want if the styles are not defined inline.
    It seems that the NS6 alternative for currentStyle is defaultView but it seems that it is quite limited (maybe bugy).
    http://www.xs4all.nl/~ppk/js/getstyles.html

  6. #6
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Show me the code you are using, or an example of what you are trying to do.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  7. #7
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am not really trying to do anything now. I just wanted to know how to get the styles of an element
    Now i think i know: either you define them inline, or you have to use the currentStyle/defaultView.

  8. #8
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    S7even, I think you're catching on witht he defaultView. Here's an example I made using W3C DOM:

    Code:
    <html>
    <head>
    <style>
    .myClass {
    background-color: green;
    }
    </style>
    </head>
    <body>
    <div class="myClass" id="myDiv">Element to get sytles from</div>
    <script>
    x = document.defaultView.getComputedStyle(document.getElementById("myDiv"), "").getPropertyValue("background-color");
    alert(x);
    </script>
    </body>
    </html>
    Seems like a lot of code to get something that IE does so simply, but that's just the way it is

    If you have any questions about the code, just ask and I'll try my best to answer them.

    aDog

    P.S.-Starting in IE 5.5 there should also be runtimeStyle...not really sure different between currentStyle and runtimeStyle, but you might wanna make sure you move whichever one you want.

  9. #9
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Arielladog, thats the code. I tested it with Mozilla 1.1 and it seems that it works ok. Somewhere i read that Netscape has/had a bug that only allowed a limited number of attributes to be acquired that way. Is this totally inaccurate, or some versions of NS6/Mozilla have problems with it?

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In IE this is how the style objects break down

    style
    Reading: Any inline styles
    Writing: Any

    currentStyle
    Reading: Any inline OR cascaded styles
    Writing: none

    runtimeStyle
    Reading: Current state of object's style (the style object is unchanged, and can be revereted to)
    Writing: Any, does not write to the style object

    Make sense?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I couldn't get runtimeStyle to work with IE6.
    What is the actual deference between currentStyle and runtimeStyle?

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    currentStyle is readonly. runtimeStyle is read/write. I hardly ever use it. I just modify the style object instead.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys,

    I couldn't get:

    x = document.getElementById("myDiv").runtimeStyle.backgroundColor;

    To work for me. Also I noticed that when I did a for..in loop for the runtimeStyle object, it took a while to get each value, so I guess IE's computing it somehow and it's not just an object with readily available properties.

    aDog

  14. #14
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, it seems to me that some folks here are having difficulty understanding runtimeStyle, and how it's different from style and currentStyle. So, I've created a page that I hope will explain/demonstrate it pretty well. Just start clicking the buttons and pay attention to what changes.

    http://www.peterbailey.net/dhtml/styles.htm
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  15. #15
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! Now its very clear!!
    Is there an equivalent of runtimeStyle for NS6+?

  16. #16
    JavaScript Guru (Big Ego) Arielladog's Avatar
    Join Date
    Jul 1999
    Location
    SC, USA
    Posts
    390
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I finally understand

    I think runtimeStyle is just a shortcut (wasn't needed), so I dunno if there's a Mozilla equivelent.

    aDog

  17. #17
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone made any progress with this problem?

    Currently looking for a reliable W3C way to move a div 'by' x-number of pixels (x-axis) and y number of pixels (y-axis) without relying on inline css to set the default top and left css-p values.

    Basically the issue still revolves around how to 'get' css values that have been set in either embedded or external css.

    Anyone?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  18. #18
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can use offsetTop and offsetLeft, although I am not sure if this is very reliable.
    http://www.xs4all.nl/~ppk/js/findpos.html

  19. #19
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy!

    quicky example...

    var o = document.getElementById( 'someID' );
    var left = ( o.currenStyle ) ? o.currentStyle.left : o.style.left;
    var top = ( o.currenStyle ) ? o.currentStyle.top : o.style.top;

    Or, to make it easy for multiple reads..

    o.readStyle = ( o.currenStyle ) ? o.currentStyle : o.style;
    var left = o.readStyle.left;
    var top = o.readStyle.top;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  20. #20
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks both.

    I was hoping for a single W3C method, but I take it that none exists.

    Next:
    I want to know how to use the newly gotten info to replicate the moveBy() function.

    I've tried parseInt without joy, though it's likely I'm using it wrongly.

    Beetle, is there any chance you can give me a verbose example that fits around the following function/call structure?

    Code:
    function moveDiv(id,moveX,moveY) {
    ...
    }
    
    ...
    
    onclick="moveDiv('myDiv','10','20')"
    ...
    TIA
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  21. #21
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for a simple placement, this should do it
    Code:
    function moveDiv( id, moveX, moveY )
    {
    	var o = document.getElementById( id );
    	o.readStyle  = ( o.currentStyle ) ? o.currentStyle : o.style;
    	o.style.left = ( parseInt( o.readStyle.left ) + moveX ) + "px";
    	o.style.top  = ( parseInt( o.readStyle.top ) + moveY ) + "px";
    }
    For an animated movement, check out my animation API (see: Animate Class). Right now it uses offsetLeft and offsetTop, but I will soon be modifying it to be more variable to include style properties as well.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •