Question

我正在尝试使用原型创建H2标题，以便可以根据需要单独设置它们。

我正在使用this.appendChild(document.createTextNode(''));向H2添加文字。我需要在appendChild之前使用父节点，我相信在这种情况下是this关键字但是我不确定它是被识别为父节点还是它实际上是父节点？我还不确定如何通过构造函数本身的参数添加文本。我使用了一个变量'font'，但不知道如何让它工作，因为它没有添加css样式？

我正在学习如何使用原型，所以如果有任何其他明显错误我错过了请告诉我。

<div id='body'>
<div id='inner'>div here</div>
</div>
<script>
Heading.prototype.font;
Heading.prototype.color;
Heading.prototype.fontSize;
Heading.prototype.headingTxt;
Heading.prototype.setHeading = function() {

   var inner = document.getElementById('inner');
   this.headingTxt = document.createElement('h2');
   this.headingTxt.font = this.appendChild(document.createTextNode(''));
   this.headingTxt.style.color = this.color;
   this.headingTxt.style.fontSize = this.fontSize;
inner.appendChild(headingTxt);
}

function Heading(font, color, fontSize) {

   this.font = font;
   this.color = color;
   this.fontSize = fontSize;
}

var title = new Heading('heading here', 'red', 20);
title.setHeading();

</script>

任何人都可以帮我解决这个问题吗？

Answer 1

这是我剥离的工作版本：

function Heading(font, color, fontSize) {
   this.font = font;
   this.color = color;
   this.fontSize = fontSize;
}

Heading.prototype.setHeading = function() {
   var inner = document.getElementById('header'); //make sure inner exists
   this.headingTxt = document.createElement('h2'); //you could also scope this to be local with var if you want it to be private 
   inner.appendChild(this.headingTxt);
}

var title = new Heading('heading here', 'red');
title.setHeading();

Answer 2

如果您确实需要重用该实例，那么使用原型将是正确的。但理想情况下，您之后会更多地使用它，比如稍后更改值：

(function (window, undefined) {

    window.Heading = (function () {

        var Heading = function (text, fontColor, fontSize, element) {

            // Re-enforce instance
            if (!(this instanceof Heading))
                return new Heading(text, fontColor, fontSize, element);

            // Validate Element. element can be null
            element = (element.nodeType) ? element : null;

            // Get first H2 element in the page if not element is informed
            if (element === null) {

                var h2 = window.document.getElementsByTagName('H2');

                if (h2.length)
                    // Get first H2 element from the page
                    element = h2[0];

            } else if (element.nodeType !== 1)

                // Validate if this is an Element
                throw new Error('Only Element type is accepted.');

            this._element = element;
            this._fontColor = fontColor;
            this._fontSize = fontSize;
            this._text = text;
        };

        Heading.prototype.set = function () {

            var propertyName = (this._element.textContent) ? 'textContent' : 'innerText';

            this._element[propertyName] = this._text;
            this._element.style.fontSize = this._fontSize;
            this._element.style.color = this._fontColor;

            return this;
        };

        Heading.prototype.values = function (text, fontColor, fontSize) {

            this._fontColor = fontColor;
            this._fontSize = fontSize;
            this._text = text;

            return this;
        };

        return Heading;

    })();

})(window);

// Example
var instance = Heading('First exmaple', 'red', '20px');

// Set
instance.set();

// Re-use
instance.values('Second example', 'blue').set();

如果您不需要重复使用该实例，则可能需要使用简单的函数。

var Heading = function (text, fontColor, fontSize, element) {

    // Validate Element. element can be null
    element = (element.nodeType) ? element : null;

    // Get first H2 element in the page if not element is informed
    if (element === null) {

        var h2 = window.document.getElementsByTagName('H2');

        if (h2.length)
            // Get first H2 element from the page
            element = h2[0];

    } else if (element.nodeType !== 1)

        // Validate if this is an Element
        throw new Error('Only Element type is accepted.');

    var propertyName = (element.textContent) ? 'textContent' : 'innerText';

    element[propertyName] = text;
    element.style.fontSize = fontSize;
    element.style.color = fontColor;
};

使用原型javascript设置标题样式

2 个答案: