StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you really need to reuse the instance the use prototype would be correct. But ideally you would have more to do with it afterwards, like change the values later:</p> <pre><code>(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(); </code></pre> <p>If you don't need to re-use the instance, a simple function might be appropriate.</p> <pre><code>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; }; </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload