CODEWITHSUNDEEP
javascripthtmlcss
Max
Max

Reputation: 868

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

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 :)

Upvotes: 1

Views: 2059

Answers (2)

jfriend00
jfriend00

Reputation: 707436

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).

Upvotes: 1

Parthasarathy B
Parthasarathy B

Reputation: 1942

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

refer :

  1. http://api.jquery.com/css/
  2. http://www.w3schools.com/jquery/jquery_css_classes.asp

This will avoid reinventing the wheel again...

Upvotes: 0

Related Questions