使用原型javascript設置標題樣式

Question

我正在嘗試使用原型創建H2標題，以便可以根據需要單獨設置它們。我使用this.appendChild(document.createTextNode(''));將文本添加到H2。我需要使用appendChild之前的父節點，我認爲這種情況下是this關鍵字，但我不確定它是否被識別爲父級或者它是否實際上是父級？我也不確定如何通過構造函數本身的參數添加文本。我已經使用了一個變量「字體」，但不知道如何使它工作，因爲它不添加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; 
};