JavaScript的動態加載腳本和樣式

時間 2021-01-02

標籤 javascript css java 瀏覽器 app ide 性能測試網站 url 欄目 JavaScript 简体版

原文原文鏈接

本章主要講解上一章剩餘的獲取位置的DOM 方法、動態加載腳本和樣式。javascript

一．元素位置
上一章已經經過幾組屬性能夠獲取元素所需的位置，那麼這節課補充一個DOM 的方
法：getBoundingClientRect()。這個方法返回一個矩形對象，包含四個屬性：left、top、right
和bottom。分別表示元素各邊與頁面上邊和左邊的距離。css

  
  
           
  
  
   
   
            
   
   var box = document.getElementById('box'); //獲取元素 
   
   
            
   
   alert(box.getBoundingClientRect().top); //元素上邊距離頁面上邊的距離 
   
   
            
   
   alert(box.getBoundingClientRect().right); //元素右邊距離頁面左邊的距離 
   
   
            
   
   alert(box.getBoundingClientRect().bottom); //元素下邊距離頁面上邊的距離 
   
   
            
   
   alert(box.getBoundingClientRect().left); //元素左邊距離頁面左邊的距離

PS：IE、Firefox3+、Opera9.五、Chrome、Safari 支持，在IE 中，默認座標從(2,2)開始計
算，致使最終距離比其餘瀏覽器多出兩個像素，咱們須要作個兼容。java

  
  
           
  
  
   
   
            
   
   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 腳本而下降了
整站的性能，因此就出現了動態腳本的概念，在適時的時候加載相應的腳本。
好比：咱們想在須要檢測瀏覽器的時候，再引入檢測文件。app

  
  
           
  
  
   
   
            
   
   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 不支持，會報錯！ide

  
  
           
  
  
   
   
            
   
   //動態執行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，那麼就能夠針對不一樣的瀏覽器特性來使用不一樣的方法。這
裏就忽略寫法了。測試

三．動態樣式
爲了動態的加載樣式表，好比切換網站皮膚。樣式表有兩種方式進行加載，一種是<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); 
   
   
            
   
   } 
   
   
            
   
   }