Question

我想知道如何在DOM元素中自动设置一组属性。我知道它不会像这样工作，但请参阅代码以了解我的意思：

function interface(bg, color, size, margin, content) {
    this.style.backgroundColor=bg; //native html properties
    this.style.color= last;
    this.style.fontSize = size;
    this.style.marginLeft = margin;
    this.innerHTML=content;
}

var Green = new interface("green", "white", "20px", "20", "the green one");
var Blu = new interface("blue", "white", "48px", "0", "the blue one");

document.getElementById("demo").interface = Green;

这样一组属性就可以应用，而不必再一次指向它们。我完全离开了吗？

Answer 1

不确定为什么要这样做，但有可能。

function Interface(bg, color, size, margin, content) {
    this.bg = bg;
    this.color = color;
    this.size = size;
    this.margin = margin;
    this.content = content;
}

Interface.prototype.implement = function (element) {
    element.style.backgroundColor = this.bg;
    element.style.color = this.color;
    element.style.fontSize = this.size;
    element.style.marginLeft = this.margin;
    element.innerHTML = this.content;
};

var green = new Interface("green", "white", "20px", "20px", "the green one"),
    blu = new Interface("blue", "white", "48px", "0", "the blue one");

green.implement(document.getElementById("demo"));

<div id="demo">Demo</div>

<强>加成

@FelixKling提到

Object.assign（ECMA6）作为一种可能的解决方案，但它需要进行深度扩展，它只提供浅层扩展。以下是基本深度扩展（ECMA5）的示例。

/*global document */
(function () {
    'use strict';

    var assigner = function (target) {
            if (target && typeof target === 'object') {
                Array.prototype.slice.call(arguments, 1).forEach(function (source) {
                    if (source && typeof source === 'object') {
                        Object.keys(source).forEach(function (key) {
                            var copy = source[key],
                                src,
                                clone,
                                type;

                            if (target !== copy) {
                                type = typeof copy;
                                if (type === 'object') {
                                    src = target[key];
                                    if (src && typeof src === 'object') {
                                        clone = src;
                                    } else {
                                        clone = {};
                                    }

                                    target[key] = assigner(clone, copy);
                                } else if (type !== 'undefined') {
                                    target[key] = copy;
                                }
                            }
                        });
                    }
                });
            }

            return target;
        },

        green = {
            style: {
                backgroundColor: 'green',
                color: 'white',
                fontSize: '20px',
                marginLeft: '20'
            },
            innerHTML: 'the green one'
        };

    assigner(document.getElementById("demo"), green);
}());

<div id="demo">Demo</div>

也许某人有办法以一般的深层方式使用Object.assign？

Answer 2

Xotic提供了一个很好的答案，但另一个有趣的方法是让你的函数生成其他函数来执行工作：

function makeDomUpdater(bg, color, size, margin, content) {
  return function(element){
    element.style.backgroundColor = bg;
    element.style.color = color;
    element.style.fontSize = size;
    element.style.marginLeft = margin;
    element.innerHTML = content;
  };
}

var green = makeDomUpdater("green", "white", "20px", "20", "the green one"),
    blu = makeDomUpdater("blue", "white", "48px", "0", "the blue one");

green(document.getElementById("demo"));

<div id="demo">Demo</div>

这不会使用对象构造函数，但是再一次，并非所有内容都必须使用。：）

Answer 3

首先，为了理解JavaScript中的类，原型，构造函数等（这似乎是你想要的），我可以推荐免费的书（你也可以买平装书）：http://eloquentjavascript.net/ 。你应该花时间去深入研究这个概念，这些概念与你的概念有所不同（语言方面）。

我知道您刚刚使用它作为示例，但对于所有这些样式属性，您应该使用HTML类和各自的CSS定义。要将它们应用于元素，您只需分配该类。这样，DOM元素将“实现CSS接口green”，可以这么说。我会单独处理这些内容。

.green {
  background-color: green;
  color: white;
  font-size: 20px;
  margin-left: 20px; // margin-left needs a unit
}

.blue {
  background-color: blue;
  color: white;
  font-size: 48px;
  margin-left: 0; // at least if it isn't zero
}

要使用类似于您的JavaScript代码，请参阅JLRishe's和Xotic750's个答案。

在JS中创建一个包含本机属性的对象构造函数（没有jQuery）

3 个答案: