Question

这一定是一个非常愚蠢的问题，但我无法让它发挥作用。

我正在创建自己的UIKit for iOS。（网站套件，允许类似iPhone的界面）。

但是，我正在尝试创建一个JavaScript库，可用于更改文档的多个元素。例如，在文档加载时设置自定义背景颜色。

我正在尝试使用面向对象的JavaScript。像这样：

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

我怎么能实现这个目标？（所以自定义“UI”对象，以及（一个例子）如何从INSIDE对象中更改文档的背景颜色。）

Answer 1

您可以在JS对象中保存对DOM的引用，并根据需要重写它。

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

您可以通过以下方式初始化：

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");

这是一个简单的实现，需要更智能，但它应该完成这项工作。

编辑：在原始发布中犯了一个错误，并修复了错误的代码。还举了一个例子：http://jsfiddle.net/HpW3E/

Answer 2

与silverstrike的代码类似，但您可以在接口构造函数中传递目标对象，以免将来遇到麻烦。

function Interface(target) {
    target = target || document.body;
    this.setBackground = function (color) {
        target.style.background = color || 'white';
    };
}

好的，现在你可以这样做：

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

甚至在某些情况下您正在global scope中应用界面！仅限！：

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

也可以这样工作：

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

Answer 3

这是一个非常简单的方法

// define the object
var Interface = function () {

    var interface = document.getElementById("interface"); // just an example

    // your new methods
    this.setBackground = function (color) {
        interface.style.backgroundColor = color;
    }

    // rest of your code
}

现在你可以利用它了

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

JavaScript访问自定义对象的元素

3 个答案: