JavaScriptはすべての「可視」要素にメソッドを追加します

私はコードをフェードインしました。それは大丈夫です、それは働いています。私は良い選択肢（JQueryなど）があることを知っていますが、私は学びたいと思います。私はJQueryのコードを読んだが、私はそれを取得しません。視覚的な要素（div、span、pなど）にコードとして（メソッドとして）フェードを追加したいと思います。だから、私はこの方法でフェードインを呼び出すことができるようにしたい：JavaScriptはすべての「可視」要素にメソッドを追加します

var div = document.getElementById('div'); 
... 
div.fadeIn(500); 
span.fadeIn(50);

私はそれをどのように行うことができますか？ありがとうございます。

更新：新しいコードはFirefoxとGoogle Chromeで動作しています。どうもありがとうございました！

<html> 
    <head> 
     <title>Fade In</title> 
     <style type="text/css"> 
     div#d { 
      color: #fff; 
      background: #000; 
      margin: 0 auto; 
      text-align: center; 
      padding: 5px; 
      width: 500px; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="d"> 
      <p>Div</p> 
     </div> 
     <script type="text/javascript"> 
     HTMLElement.prototype.fadeIn = function(milliseconds) { 
      var intervalID = null, 
       self = this; 

      if(!this.style.opacity) { 
       this.style.opacity = 0; 
      } 

      intervalID = window.setInterval(function() { 
       /* Replace call == Google Chrome fix */ 
       var opacity = parseFloat(self.style.opacity.replace(',', '.'), 10); 

       if(opacity < 1) { 
        opacity += 0.1; 
        self.style.opacity = opacity.toString(); 
       } 
       else { 
        window.clearInterval(intervalID); 
       } 
      }, milliseconds); 
     } 

     document.getElementById('d').fadeIn(100); 
     </script> 
    </body> 
</html>

出典

2011-01-17 thom

あなたはjQueryのはを開始するために作成された理由である、しかしそれは一貫性なくすべてのブラウザを通じてサポートされ、これらのメソッドを持っているHTMLElement.prototypeを延長しなければならない - これは一貫性のある抽象化されたインターフェースのラッパーを提供するために、 DOM要素にfadeInのような魔法を与えます。

だから、あなたは試してみて、一貫しHTMLElement.prototypeの拡張をサポートする時に失敗、それをサポートするブラウザ用HTMLElement.prototypeを拡張して、IEなどを無視して、
現代のブラウザで一貫性を達成しようとする

てみてくださいすることができますすべてのブラウザ

なjQueryの

使用などのインターフェイスを模倣しようとjQueryの
ため

厳密に学習目的であれば、試してみてください。本番用の場合は、後者（jQueryを使用）を使用するか、プロトタイプの呼び出し構文を使用しないでください。

出典

2011-01-17 21:08:50

そして、学習のためにも、私はこれが有用な運動ではないと主張します。あなたが学ぶ重要なことは、jQueryがフェードのような効果をクロスプラットフォームでうまくいかに楽にするかを理解することです。 –

件名の良い読書 - http://delete.me.uk/2004/09/ieproto.htmlとhttp://blog.creuna.dk/2007/11/26/extending-the-native-behavior- of-html-elements-in-internet-explorer / –

JavaScriptはすべての「可視」要素にメソッドを追加します

答えて

関連する問題