Simple javascript getProperty function cannot access CSS styles, even though it should be able to?

Question

I've been learning javascript and one thing I was trying to accomplish was designing some good encapsulated javascript functions for my code. The code is as follows:

<html>
    <head>
        <title>Test, Proof of Concept</title>
        <style>
            div.ball {
                content:url(http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg);
                float:left;
                width:50px;
                height:50px;
                position:absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <div style="width:600px;height:600px;background-color:#3366CC" id="canvas">  
            <div class="ball" id="ball">
            </div>
        </div>

        <script>
            function getProperty(elementId, property) {
                return document.getElementById(elementId).style[property];
            }

            function setProperty(elementId, property, value) {
                document.getElementById(elementId).style[property] = value;
            }      

            (function() {

                //setProperty("ball", "top", String(200  + "px") );   

            /*  If I include the line above, the code suddenly works as expected. */

                var topVal = parseFloat( getProperty("ball", "top").replace("px","") );
                setProperty("ball","top",topVal + 100);

            })();

        </script>

    </body>
</html>

As indicated by the multi-line comment in my code, the code will work if I include that commented out line. I think I understand why the code will not work without that line (something about my CSS code at the top of the page setting the "top" and "left" attribute to the client object and not the object with the id 'ball'?) but I have no clue how to get my code to work without including it.

Could I get some insight about the mistake I am making in regards to my assumption about how CSS works, and how my code can be made to work without the commented out line?

I really appreciate your time :)

jfriend00 · Accepted Answer · 2014-03-27 04:09:43Z

1

When you read a property like this:

obj.style[property]

you are reading ONLY the styles that are directly set on that object either with the style property in the declaration of that object in the HTML or set directly on that object via the style property with javascript. That code does not read styles that are inherited from style sheets or might be inherited from parent objects.

To get what the W3C calls the computedStyle which includes any styles inherited from style sheets, you can use window.getComputedStyle() which you can read about here.

Your getProperty() function could look like this:

function getProperty(elementId, property) {
    var obj = document.getElementById(elementId);
    return window.getComputedStyle(obj).getPropertyValue(property);
}

If you want to support versions of IE before IE9, you have to use an IE-specific version of this which is called currentStyle and there are shims that can be installed to make older IE behave like the rest of the world (or as close as possible).

edited Mar 27, 2014 at 4:09

answered Mar 27, 2014 at 4:02

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jfriend00 Over a year ago

@Max - I'm not sure you copied my code correctly. It's window.getComputedStyle(). getComputedStyle() is a method on the window object, not on the element you're trying to get the style for. You pass the desired object to the method. It is a bit counter-intuitive.

Max Over a year ago

Added in your code, and suddenly everything works beautifully :) If you knew just HOW MUCH time I put into trying to get this code to work (the code shown was an exert from my actual program) you would be able to tell that I am extremely grateful :)

Parthasarathy B · Accepted Answer · 2014-03-27 04:08:47Z

0

jQuery - Get and Set CSS Classes can solve your issue.

refer :

This will avoid reinventing the wheel again...

answered Mar 27, 2014 at 4:08

Parthasarathy B

1,9421 gold badge16 silver badges10 bronze badges

1 Comment

jfriend00 Over a year ago

The convention here on StackOverflow is that if the OP doesn't offer any mention of jQuery in their question or tags, then you don't offer a jQuery answer. SO wants to preserve the ability to ask non-jQuery questions without getting deluged with jQuery answers.

Collectives™ on Stack Overflow

Simple javascript getProperty function cannot access CSS styles, even though it should be able to?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related