Question

This must be a very stupid question, but I just can’t get it to work.

I’m creating my own UIKit for iOS. (Website-kit which will allow iPhone-like interfaces).

But, I’m trying to create a JavaScript library, which can be used to change several elements of the document. For instance, set a custom background colour when the document loads.

I’m trying to do that with object-orientated JavaScript. Like this:

var UI = new Interface();
UI.setBackground("#000");

How could I achieve this?
(So the custom “UI” Object, and (an example) on how to change the background color of the document, from INSIDE the object.)

Answer 1

You can save a reference to the DOM inside the JS object and rewrite it as needed.

function Interface() {
    this.setBackground = function (color) {
        this.pointTo.style.background = color;
    };
    this.pointTo = document.body;
}

You can initialize this by:

var UI = new Interface();
UI.pointTo = document.getElementById('some_id');
UI.setBackground("#000");
// Set another style, on a different element
UI.pointTo = document.getElementById('some_other_id');
UI.setBackground("#FFF");

This is a simple implementation and need to be allot smarter, but it should do the job.

Edit:
Made a mistake in original posting, and fixed erroneous code. Also made an example: http://jsfiddle.net/HpW3E/