JavaScriptのダイナミックロードスクリプトとスタイル

9407 ワード

JavaScript ダイナミック

この章では、前の章の残りの場所を把握するためのDOM方法、動的なシナリオとスタイルを説明します.
一.元素の位置の前の章はいくつかの属性を通して元素の必要な位置を取得できました.この課はDOMを追加する方法:get BoundingClienntRect()です.この方法は長方形オブジェクトを返します.4つの属性を含みます.left、top、right、bottom.元素の各辺とページの上と左側の距離をそれぞれ表します.


  
  
  
  
   
   
   
   var box = document.getElementById('box'); //     
   
   
   
   alert(box.getBoundingClientRect().top); //              
   
   
   
   alert(box.getBoundingClientRect().right); //              
   
   
   
   alert(box.getBoundingClientRect().bottom); //              
   
   
   
   alert(box.getBoundingClientRect().left); //

PS:IE、Firefox 3+、Opera 9.5、Chrome、Safariサポート、IEではデフォルト座標が(2、2)から計算され、最終距離が他のブラウザよりも2つのピクセル多くなるため、互換性が必要です.


  
  
  
  
   
   
   
   document.documentElement.clientTop; // IE  0，IE  2 
   
   
   
   document.documentElement.clientLeft; // IE  0，IE  2 
   
   
   
   function getRect(element) { 
   
   
   
   var rect = element.getBoundingClientRect(); 
   
   
   
   var top = document.documentElement.clientTop; 
   
   
   
   var left = document.documentElement.clientLeft; 
   
   
   
   return { 
   
   
   
   top : rect.top - top, 
   
   
   
   bottom : rect.bottom - top, 
   
   
   
   left : rect.left - left, 
   
   
   
   right : rect.right - left 
   
   
   
   } 
   
   
   
   }

PS:外部データ、内縁、外枠、スクロールバーをそれぞれ加えて、すべてのブラウザが一致するかどうかをテストします.
二.ダイナミックスクリプトはウェブサイトの需要が大きくなり、シナリオの需要もだんだん大きくなります.私たちはJSスクリプトをたくさん導入して、ステーション全体の性能を低下させなければなりません.だから、ダイナミックスクリプトの概念が現れて、適時に相応のスクリプトをロードします.例えば、ブラウザをチェックする必要がある時に、検査ファイルを導入したいです.


  
  
  
  
   
   
   
   var flag = true; //  true     
   
   
   
   if (flag) { 
   
   
   
   loadScript('browserdetect.js'); //     js 
   
   
   
   } 
   
   
   
   function loadScript(url) { 
   
   
   
   var script = document.createElement('script'); 
   
   
   
   script.type = 'text/javascript'; 
   
   
   
   script.src = url; 
   
   
   
   //document.head.appendChild(script); //document.head   <head> 
   
   
   
   document.getElementsByTagName('head')[0].appendChild(script); 
   
   
   
   }

PS:document.head呼び出し、IEはサポートされていません.エラーを報告します.


  
  
  
  
   
   
   
   //    js 
   
   
   
   var script = document.createElement('script'); 
   
   
   
   script.type = 'text/javascript'; 
   
   
   
   var text = document.createTextNode("alert('Lee')"); //IE       
   
   
   
   script.appendChild(text); 
   
   
   
   document.getElementsByTagName('head')[0].appendChild(script);

PS:IEブラウザは、scriptが特別な要素であり、サブノードにアクセスできないと考えています.互換性のために、text属性を使って代替できます.


  
  
  
  
   
   
   
   script.text = "alert('')"; //IE      。

PS:もちろん、textがサポートされていないなら、異なるブラウザの特性に対して異なる方法を使うことができます.ここでは書き方を無視します.
三.ダイナミックスタイルは、ウェブサイトの皮膚を切り換えるなど、ダイナミックなスタイル表を読み込むために.スタイルシートには2つの方法があります.もう一つは「link」ラベル、もう一つは「style」ラベルです.


  
  
  
  
   
   
   
   //    link 
   
   
   
   var flag = true; 
   
   
   
   if (flag) { 
   
   
   
   loadStyles('basic.css'); 
   
   
   
   } 
   
   
   
   function loadStyles(url) { 
   
   
   
   var link = document.createElement('link'); 
   
   
   
   link.rel = 'stylesheet'; 
   
   
   
   link.type = 'text/css'; 
   
   
   
   link.href = url; 
   
   
   
   document.getElementsByTagName('head')[0].appendChild(link); 
   
   
   
   } 
   
   
   
   //    style 
   
   
   
   var flag = true; 
   
   
   
   if (flag) { 
   
   
   
   var style = document.createElement('style'); 
   
   
   
   style.type = 'text/css'; 
   
   
   
   //var box= document.createTextNode(#box{red}'); IE    < /span> 
   
   
   
   //style.appendChild(box); 
   
   
   
   document.getElementsByTagName('head')[0].appendChild(style); 
   
   
   
   insertRule(document.styleSheets[0], '#box', 'red'< /span>, 0); 
   
   
   
   } 
   
   
   
   function insertRule(sheet, selectorText, cssText, position) { 
   
   
   
   //    IE 
   
   
   
   if (sheet.insertRule) { 
   
   
   
   sheet.insertRule(selectorText + "{" + cssText + "}", position); 
   
   
   
   //   IE 
   
   
   
   } else if (sheet.addRule) { 
   
   
   
   sheet.addRule(selectorText, cssText, position); 
   
   
   
   } 
   
   
   
   }

FLEX入門編------各種data Provider大集合